BookAdd.jsx

import React, { useContext, useState, useEffect, useRef } from 'react';
import { connect, history } from 'umi';
import {
  Form,
  Card,
  Tabs,
  Badge,
  Spin,
  Row,
  Col,
  Input,
  Select,
  Button,
  Table,
  InputNumber,
  Popover,
  Steps,
  Tag,
  Divider,
  Upload,
  message,
  Descriptions,
  Empty,
  AutoComplete
} from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { dispatchHandle } from '@/utils/publicHandle';
import ExportFile from '@/components/Custom/ExportFile';
import classNames from 'classnames';
import utilsStyles from '@/utils/utils.less';
import styles from './index.less';
import WorkStep from '@/components/Customized/Step/index';
import moment from 'moment';

import TableEdit from '@/components/Table/TableEdit';
import OperateFooterBar from '@/components/OperateFooterBar';

import {DownloadOutlined, SettingOutlined, InboxOutlined , UploadOutlined, PlusOutlined, CloseOutlined, LoadingOutlined,FileTextOutlined } from '@ant-design/icons';
import { _apiUrl_,beforeUpload } from '@/utils/common';
import ShowApproval from '@/components/ShowApproval/ShowApproval';
import { dicFindUtils, DictBizType, ApproveType } from '@/utils/utils';
import AuditProgress from '@/components/AuditProgress';
import StandForm from './components/StandForm';
import StepGroupBar from '@/components/Customized/StepGroupBar';
import DownloadUrlFile from '@/components/DownloadUrlFile';
import UploadFile from '@/components/UploadFile';
import omit from 'omit.js'
const { Option } = Select;
const { TabPane } = Tabs;
const { Step } = Steps;
const { Dragger } = Upload;
const formItemLayout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};
const formTailLayout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 12 },
};
 
const BookAdd = (props) => {
  const [modalVisible, setModalVisible] = useState(false);
  const [calcVisible, setCalcVisible] = useState(false);
  const [currentModalType, setCurrentModalType] = useState(null);
  const [loading, setLoading] = useState(false);
  const [fileList, setFileList] = useState([]);
  const [imageList, setImageList] = useState([]);
  
    //preview
  const [previewImage, setPreviewImage] = useState('');
  const [previewTitle, setPreviewTitle] = useState('');

  //新增功能模块
  const [ revertItem,setRevertItem] = useState({});

  const [supplierList,setSupplierList] = useState([]);//供应商内容
  
  const [standDetail,setStandDetail] = useState({});//将standDetail提取出来
  const [hasFindCode,setHasFindCode] = useState(false);
  const [hasMaterItem,setHasMaterItem] = useState(null);//找到，则设置当前物料的信息

  const [isSelect,setIsSelect] = useState(false);
  
  const [form] = Form.useForm();
  const { id, type } = props.match.params;
  const { auditType } = props.location.query;
  console.log(`type is:`, type,`auditType is:`,auditType);
  const {
      ware: { standBookList,canUseSupplierList },
      dict: { dicTotalsList, dicWarehouseList,supplierPage },
      universal: {
          approvalDetail,
      },
      materialInfo:{
        materListAll
      },
      queryLoading,
      submitLoading,
      dispatch
  } = props;
  console.log(`approvalDetail is:`, approvalDetail);
 console.log(`canUseSupplierList is:`, canUseSupplierList);



  useEffect(() => {
    const { id, type } = props.match.params;
    if (id) {
      //id不为空，则查详情
      if (type === 'view' || type ==='edit') {
         dispatchHandle(dispatch, 'ware/warehouse_service_account_id_get', {
        id
      }, (detail) => {
              //当前是编辑状态，供应商单独查询
              if ( type === 'edit') {
                dispatchHandle(dispatch, 'ware/warehouse_service_material_info_material_supplier_id_get', {
                  id : detail?.materialInfoId
                });
            }
            setStandDetail(detail);//变动
         });
      } else if (type === 'verifyView') {
        //审核3组下的详情
         dispatchHandle(dispatch, 'ware/warehouse_service_account_review_id_get', {
            id
          }, (detail) => {
            setStandDetail(detail);//变动
             //查已有供应端列表
              dispatchHandle(dispatch, 'ware/warehouse_service_material_info_material_supplier_id_get', {
                  id : detail?.materialInfoId
                });
          });
      }
    };
     //查仓库列表
    dispatchHandle(dispatch, 'dict/warehouse_service_warehouse_info_post', {
        pageSize:9999
    });
    //查供应商
    dispatchHandle(dispatch, 'dict/common_service_t_supplier_info_post', {
        pageSize:9999
    });
    //查询物料管理列表
    dispatchHandle(dispatch, 'materialInfo/warehouse_service_material_info_post_all', {});
  }, []);

  //重新计算
  useEffect(() => {
      form.resetFields();
  }, [props.ware.standBookDetail?.id,props.ware.standReviewDetail?.id]);

  
  const getListItems = (payload = {}) => {
    
  };
 


  const handleSubmit = (e) => {
    e.preventDefault();
    const { handleClose, addType } = props;
    // const { userDetail} = props.groupList;
    
    form
      .validateFields()
      .then((values) => {
        let params = {
            ...values
        }
        let approvalDetail = props.universal.approvalDetail;
        if (approvalDetail && approvalDetail.length === 0) {
          message.info("暂无配置库存台账流程，请选配置！",1.5);
          return false;
        }

        console.log(`handleSubmit values is:`, values);
        console.log(`values['materialInfo.materialType'] is:`,values['materialInfo.materialType'])
         if(type === 'add' || type==='edit'){
            let imageUploadInfo =  params['imageUploadInfo'];
           let fileUploadInfo = params['fileUploadInfo'];
           let deviceRelationIds = params['deviceRelation.deviceId'];
           let deviceRelationList = deviceSettingByType && deviceSettingByType.length > 0 && deviceSettingByType.map(item => {
             let findIndex = deviceRelationIds.findIndex(findItem => parseInt(findItem) === item.id);
             if (findIndex > -1) {
               return {
                 deviceName: item.dicValue,
                 deviceId: item.id
               }
             }
           });
            const unitType = dicFindUtils(dicTotalsList, DictBizType.unitMetering); //单位类型
           let mUnitArr = unitType.filter(item => item.id === values['materialInfo.unitId']);
           deviceRelationList = deviceRelationList.filter(item => item); //去掉空数组空字符串、undefined、null
           console.log(`deviceRelationList is:`, deviceRelationList);
          // console.log('unitType :>> ', unitType);
           params.deviceRelation = deviceRelationList;
            //审核字段
           params.reviewId = approvalDetail && approvalDetail[0].id;
           params.reviewIs = approvalDetail && approvalDetail[0].whetherNeedAudit;


           params.materialInfo = {
             materialCode: values['materialInfo.materialCode'],
             materialName: values['materialInfo.materialName'],
             materialTypeId: values['materialInfo.materialTypeId'] || null,//设置物料类型ID
             unitId: values['materialInfo.unitId'],//单位ID
             munit: mUnitArr[0]?.dicValue,//单位
             mmodel: values['materialInfo.mmodel'],
             picture:values['picture'].toString(),
             id:hasFindCode ? hasMaterItem?.id : null,//新增要把物料ID ,这里非常重要，如果是type === add ,下拉物料里面有现成物料，则把现成的下位物料id带上去，否则为新创建的物料编号
           };
           console.log(`now type is:==============>`, type);
           if (type === 'add') {
             params.materialInfo = {
               ...params.materialInfo,
               materialSupplierList:[{
                brand: values['materialInfo.materialSupplierList.brand'],
                materialPrice: parseInt(values['materialInfo.materialSupplierList.materialPrice']),
                produceArea: values['materialInfo.materialSupplierList.produceArea'],
               // supplierCode: values['materialInfo.materialSupplierList.supplierCode'],
                supplierId:values['materialInfo.materialSupplierList.supplierId'],
                supplierName: values['materialInfo.materialSupplierList.supplierName'],
              }]
             }
           } else if (type === 'edit') {
             params.materialInfo = {
               ...params.materialInfo,
               materialSupplierList: [{ id: canUseSupplierList[0]?.id }],//如果是编辑状态，则拿关联的供应商ID
             }
           }
           //fileInfo
           let fileList = fileUploadInfo || [];
           let materialInfo = params.materialInfo;
             params = {
               ...params,
               materialInfo: {
                 ...materialInfo,
                 fileInfo:fileList
               }
             }
         }
        
          delete params['imageUploadInfo'];
          delete params['fileUploadInfo'];
         delete params['deviceRelation.deviceId'];
         delete params['materialInfo.unitId'];
        
        
          delete params['materialInfo.materialCode'];
          delete params['materialInfo.materialName'];
          delete params['materialInfo.mmodel'];
          delete params['materialInfo.materialType'];
          delete params['materialInfo.materialTypeId'];

         if (params['materialInfo'].fileInfo && params['materialInfo'].fileInfo.length  === 0) {
           delete params['materialInfo'].fileInfo;
         }
        
          delete params['materialInfo.materialSupplierList.brand'];
          delete params['materialInfo.materialSupplierList.materialPrice'];
          delete params['materialInfo.materialSupplierList.produceArea'];
          delete params['materialInfo.materialSupplierList.supplierCode'];
          delete params['materialInfo.materialSupplierList.supplierName'];
          delete params['materialInfo.materialSupplierList.supplierId'];
          delete params['picture'];
        
       
        const convertFieldToNum = (fields = [],params) => {
          let newParams = { ...params };
          fields && fields.forEach(field => {
            let splitArr = field.split(".");
            if (splitArr && splitArr.length > 0 && splitArr.length === 1) {
              newParams[field] = parseInt(params[field]);
            } else {
               //带有多个point,filed为 aaa.bbb.ccc 这种类型的filed
            //  let oldValue = new Function("return " + ("params." + field))();//拿到原来的key对应的值testObj.aa.bb.cc
              let oldValue = parseInt(eval("params." + field));
              eval(("newParams." + field) + "=" + oldValue);
            }
          });
          console.log(`newParams is:`, newParams);
          return newParams;
        };
        params = convertFieldToNum(['safeStockNum', 'stockNum', 'materialStatus','temporaryWarning','warehouseId','materialInfo.unitId'], params);
         console.log(`convert after params is:`, params);
        // delete values.confirmPassword;
         const payload = ( type === 'edit')? {id: standDetail.id, ...params} : params;
        dispatchHandle(dispatch, 'ware/warehouse_service_account_patch', payload, ()=> {
            closeCurrentPage('/warehouse-keeper/homework/standingBook?childTab=wait');
          // message.success(type === 'edit' ? '修改成功' : '添加成功', 2, () => {
          //   closeCurrentPage('/warehouse-keeper/homework/standingBook?childTab=wait');
          // });
        })
      })
      .catch((e) => {});
  };

  const handleClose = () => {
    setModalVisible(false);
    setCalcVisible(false);
    history.push(`/warehouse-keeper/homework/standingBook`);
  };
  const calcOperate = (obj) => {
    setCalcVisible(true);
    setCurrentModalType(obj.type);
  };
  const cancelFunc = () => {};
  const okFunc = () => {};

   const uploadButton = (
    <div>
      {loading ? <LoadingOutlined /> : <PlusOutlined />}
      <div style={{ marginTop: 8 }}>Upload</div>
    </div>
  );

  const materialOptions = materListAll && materListAll?.length > 0 && materListAll?.map(item => {
    return {
      value:item?.materialCode,
      label:item?.materialCode,
      oldnode:item
    }
  }) || [];


  let isReadOnly;
  let isDisabled;
  if (type === 'view' || type === 'verifyView') {
    isReadOnly = true;
   }
  if (type === 'edit' || type==='view' || type === 'verifyView' || hasFindCode) {
    isDisabled = true;
  }

  const detailObj = (detail) => {
    const deviceSettingByType = dicFindUtils(dicTotalsList, DictBizType.deviceSettingByType); //设备类型
    console.log(`deviceSettingByType is:`, deviceSettingByType);
    console.log(`detailObj detail is=========>:`, detail);
    let deviceRelation = detail?.deviceRelation;
    let deviceIds = deviceRelation && deviceRelation.map(item => item.deviceId) || [];
    console.log(`deviceIds is:`, deviceIds);
    let deviceValues = [];
    deviceIds && deviceIds.length > 0 && deviceIds.forEach(item => {
      let isHas = deviceSettingByType.findIndex(findItem => String(findItem.id) === String(item));
      console.log(`isHas is:`, isHas);
      if (isHas > -1) {
        deviceValues.push(String(deviceSettingByType[isHas]?.id));
        console.log(`isHas is:`, isHas, deviceSettingByType[isHas]);
      }
    });
    console.log(`deviceValues is:`, deviceValues);
 
    console.log(` String(detail?.materialInfo?.materialType) is:`, String(detail?.materialInfo?.materialType));
 
    return {
      ...detail,
      'materialInfo.materialCode': detail?.materialInfo?.materialCode,
      'materialInfo.materialName': detail?.materialInfo?.materialName,
      'materialInfo.materialType': detail?.materialInfo?.materialType && String(detail?.materialInfo?.materialType) || null,
      'materialInfo.mmodel': detail?.materialInfo?.mmodel,
      'warehouseId': detail?.warehouseId && detail?.warehouseId || null,
      'materialInfo.unitId': detail && detail?.materialInfo?.unitId || null,
       'materialInfo.materialTypeId':detail && detail?.materialInfo?.materialTypeId || null,
      //供应商信息
      'materialInfo.materialSupplierList.supplierId': detail?.materialSupplier?.supplierId,
      'materialInfo.materialSupplierList.supplierCode': detail?.materialSupplier?.supplierCode,
      'materialInfo.materialSupplierList.materialPrice': detail?.materialSupplier?.materialPrice,
      'materialInfo.materialSupplierList.brand': detail?.materialSupplier?.brand,
      'materialInfo.materialSupplierList.produceArea': detail?.materialSupplier?.produceArea,
      //其它信息
      'deviceRelation.deviceId': deviceValues,
      'materialStatus': detail?.materialStatus && String(detail?.materialStatus) || null,
      'safeStockNum':(detail?.safeStockNum === 0) ? null : detail?.safeStockNum,//安全库存
      'temporaryWarning':(detail?.temporaryWarning === 0) ? null : detail?.safeStockNum,//临近预警值
    };
  };
  const changeSupplierCode = val => {
    // const { supplierPage } = props.dict;
    // const supplierList = supplierPage?.list;//供应商
    // const canUseSupplierList = props.ware.canUseSupplierList;
    // let supperlierArr = supplierList.filter((item) => item.id === val);
    // let canSupperlierArr = canUseSupplierList.filter((item) => item.id === val);

    //这里做了变动，做 supplierList useState这里面的值去拿
    const supperlierArr = supplierList;// useSate 里面去拿  
    const canSupperlierArr = canUseSupplierList.filter((item) => item.id === val);  
    const findAutoItem = supperlierArr.filter(item => item.id === val);

    if (type === 'add') {
          form.setFieldsValue({
          'materialInfo.materialSupplierList.supplierCode': findAutoItem[0]?.supplierCode,
        });
    } else if (type === 'edit') {
       form.setFieldsValue({
         'materialInfo.materialSupplierList.supplierCode': canSupperlierArr[0]?.supplierCode,
         'materialInfo.materialSupplierList.materialPrice': canSupperlierArr[0]?.materialPrice,
         'materialInfo.materialSupplierList.supplierName': canSupperlierArr[0]?.supplierName,
         'materialInfo.materialSupplierList.brand': canSupperlierArr[0]?.brand,
       });
    }
  };
  // 现有的物料列表里，下拉选中，要将现有的物料信息带到表单里面来
 const onSelectMaterCode = (value,option) => {
   setIsSelect(true);
   //add 添加情况下才有列表展示
    if(type === 'add'){
      console.log(`value,option `,value,option);
      if(JSON.stringify(option) !== '{}'){
        const hasOption = option?.oldnode;
        console.log(`hasOption is:`,hasOption);
        //更新供应商下拉列表数据
        let oldSupperList = hasOption?.materialSupplier || [];
            oldSupperList = oldSupperList.map(item=>({
              ...item,
              oldId:item.id
          }));
        const newSupperList = oldSupperList.map(item =>({
          ...item,
          id:item.supplierId,//覆盖掉，给表单使用
        }));
        setSupplierList(newSupperList);//重新设置进去
        //将原来的图片picture拉取下来
        let tempStandDetail = {
          ...standDetail,
          materialInfo:{
            ...standDetail.materialInfo,
            materialCode:hasOption?.materialCode,//物料编号
            materialName:hasOption?.materialName,//品名
            materialTypeId:hasOption?.materialTypeId,//物料类型
            mmodel:hasOption?.mmodel,//规格
            picture:hasOption?.picture ? hasOption?.picture : null,//图片
            fileInfo:hasOption?.fileInfo,//文件信息
            unitId:hasOption?.unitId
          },
          materialSupplier:{
            materialPrice:hasOption?.materialSupplier[0].materialPrice,//物料价格
            brand:hasOption?.materialSupplier[0].brand,//品牌
            produceArea:hasOption?.materialSupplier[0].produceArea,//产地
          }
        }
        setStandDetail(tempStandDetail);
        setHasFindCode(true);
         //设置item
        setHasMaterItem(hasOption);
      }else {
        //设置如果未适配到，则用原来的
        const initSuppierList = getInitSuppierList();
        setSupplierList(initSuppierList);//重置原来的供应商
        setHasFindCode(false);
        setStandDetail({
          materialInfo:{
            materialCode:value,//输入的value
          }
        });
        setHasMaterItem(null);
      }
    }
 };
 const onChangeMaterCode = (value,option) =>{
   setIsSelect(false);//设置为不选的
  const initSuppierList = getInitSuppierList();
   //没有找到则要将原来的重置
    if(type === 'add' && JSON.stringify(option) === '{}') {
      //更改standDetail
      setStandDetail({
        'materialInfo.materialCode': value
      });
      setHasFindCode(false);
      setSupplierList(initSuppierList);//重置原来的供应商
    }
 };
 const getInitSuppierList = () => {
  const {
    supplierPage
  } = props.dict;
  const supplierListArr = supplierPage?.list || [];//供应商
  return supplierListArr;
 };
 //检测到 standDetail 发生变化，强行进行表单的重置
 useEffect(()=>{
   console.log(`standDetail  ------------------ standDetail is:`,standDetail);
   console.log(`getFieldsValue is :`,form.getFieldsValue());
  //  let fields = {...(form.getFieldsValue())};
  let fields = form.getFieldsValue();
   if(type === 'add') {
      if(hasFindCode){
        form.resetFields();
      }else {
        //这里非常重要，排除了当前物料编号的输入项，其它输入框进行，重置其表单的默认项目!!!!!!!!!!，非常重要!!!!!!!!!!!!!
        delete fields['materialInfo.materialCode'];
        const fieldsArr = Object.keys(fields);
        form.resetFields(fieldsArr);
      }
   }else if(type === 'view' || type ==='verifyView' || type ==='audit' || type === 'edit'){
     form.resetFields();
   }
 },[standDetail,hasFindCode]);


 //设置standDetail的内容值
useEffect(()=>{
  let tempStandDetail = {};
  if (type === 'view' || type === 'edit') {
    //台账查看或者编辑
    tempStandDetail = props.ware.standBookDetail;//台账列表
  } else if (type === 'verifyView') {
    //审核详情，这一块
    tempStandDetail = props.ware.standReviewDetail;
  }
   setStandDetail(tempStandDetail);
},[type]);


 //第一次的回显
 useEffect(()=>{
  const {
    supplierPage
  } = props.dict;
  const supplierListArr = supplierPage?.list || [];//供应商
   if(supplierListArr && supplierListArr?.length > 0 ){
      setSupplierList(supplierListArr);//设置供应商下拉列表
   }
 },[props.dict.supplierPage]);

 

//==============================业务用到的变量==============================
const materialType = dicFindUtils(dicTotalsList, DictBizType.materielType); //物料类型
const deviceSettingByType = dicFindUtils(dicTotalsList, DictBizType.deviceSettingByType); //设备类型
const unitType = dicFindUtils(dicTotalsList, DictBizType.unitMetering); //单位类型
const { orderProcessBOS,auditDetail } = standDetail;
const dicHouseList = dicWarehouseList?.list; //仓库列表
  
console.log(`approvalDetail is:`, approvalDetail);
console.log(`standDetail is:`,standDetail);
  return (
    <div className={classNames(utilsStyles.disFlexCol, utilsStyles.fullContainer)}>
      {/* <NoteOptModal modalVisible={modalVisible} handleClose={handleClose} />
      <CalcCheckModal
        currentModalType={currentModalType}
        addVisible={calcVisible}
        handleClose={handleClose}
      /> */}
     
      <Form form={form} autoComplete="off" initialValues={ omit(detailObj(standDetail), ['picture','materialStatus'])} >
                <Card>
         <div className={classNames(utilsStyles.menuBar)}>基本信息</div>
          {
            (type ==='add' || type ==='edit') &&  <Row gutter={10} className={classNames(utilsStyles.gutterBox)}>
                    <Col span={6}>
                            <Form.Item
                              className={classNames(utilsStyles.antFormItem)}
                              {...formItemLayout}
                              name="materialInfo.materialCode"
                              rules={[
                                {
                                  required: true,
                                  message: '物料编号不能为空',
                                },
                              ]}
                              label="物料编号"
                            >
                              <AutoComplete placeholder="请输入" 
                                options = { materialOptions }
                                readOnly = { isReadOnly } 
                                disabled = { (type === 'add') ? false : isDisabled }
                                onSelect = { onSelectMaterCode }
                                onChange = { onChangeMaterCode }
                                filterOption={
                                  (inputValue, option) =>  {
                                     return option?.value.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1 
                                  }
                                }
                               />
                            </Form.Item>
                      </Col>
                    <Col span={6}>
                      <Form.Item
                        className={classNames(utilsStyles.antFormItem)}
                        {...formItemLayout}
                        name="materialInfo.materialName"
                        rules={[{ required: 'true', message: '请输入' }]}
                        label="品名"
                      >
                        <Input placeholder="请输入" readOnly = { isReadOnly } disabled = { isDisabled } />
                      </Form.Item>
                    </Col>
                    <Col span={6}>
                      <Form.Item
                        className={classNames(utilsStyles.antFormItem)}
                        {...formItemLayout}
                        label="物料类型"
                        rules={[{ required: isSelect ? '' :  'true', message: '请输入类型' }]}
                        name="materialInfo.materialTypeId"
                      >
                        <Select placeholder='请输入' style={{width:'100%'}} allowClear readOnly = { isReadOnly } disabled = { isDisabled }>
                        { materialType && materialType.map(item => {
                              return <Select.Option value={item.id} key={item.id}>
                                  {item.dicValue}
                                </Select.Option>
                        })}
                          </Select>
                      </Form.Item>
                    </Col>
                    <Col span={6}>
                      <Form.Item
                        className={classNames(utilsStyles.antFormItem)}
                        {...formItemLayout}
                        label="规格"
                        rules={[{ required: 'true', message: '请输入规格' }]}
                        name="materialInfo.mmodel"
                      >
                        <Input placeholder="请输入" readOnly = { isReadOnly }   disabled = { isDisabled } />
                      </Form.Item>
                    </Col>
                    <Col span={6}>
                      <Form.Item
                      className={utilsStyles.antLightFormItem}
                        {...formItemLayout}
                        label="仓库"
                        rules={[{ required: 'true', message: '仓库' }]}
                        name="warehouseId"
                      >
                       <Select style={{ width: '100%' }} placeholder='请选择' allowClear>
                         {
                            dicHouseList && dicHouseList.map(item => {
                              return <Select.Option value={ item.id }  key ={ item.id }>{ item.warehouseName}</Select.Option>
                            })
                          }   
                      </Select>
                      </Form.Item>
                    </Col>
                    <Col span={6}>
                      <Form.Item
                        className={utilsStyles.antLightFormItem}
                        {...formItemLayout}
                        label="单位"
                        name="materialInfo.unitId"
                        rules={[{ required: isSelect ? false : true, message: '请输入单位' }]}
                        disabled = { isDisabled }
                      >
                        <Select  style={{ width: '100%' }} allowClear  placeholder='请输入' readOnly = { isReadOnly } disabled = { isDisabled }>
                          {unitType && unitType.map(item => {
                            return <Option value={item.id} key={item.id}>{item.dicValue}</Option>
                          })}
                        </Select>
                      </Form.Item>
                    </Col>
                     {
                          type === 'add' && <Col span={6}>
                            <Form.Item
                              className={utilsStyles.antLightFormItem}
                              {...formItemLayout}
                              label="供应商名称"
                              name="materialInfo.materialSupplierList.supplierId"
                              rules={[{ required: true, message: '请输入供应商名称' }]}
                            >
                            <Select style={{ width: '100%' }}  placeholder ='请选择' onChange = { changeSupplierCode }>
                              {
                                supplierList && supplierList.map(item => {
                                  return <Option key ={ item.id } value={item.id}>{item.supplierName}</Option>
                              })
                              }
                            </Select>
                            </Form.Item>
                          </Col>
                      }
                      {
                          type !== 'add' && <Col span={6}>
                            <Form.Item
                              className={utilsStyles.antLightFormItem}
                              {...formItemLayout}
                              label="供应商名称"
                              name="materialInfo.materialSupplierList.supplierId"
                              rules={[{ required: true, message: '请输入供应商名称' }]}
                            >
                            <Select style={{ width: '100%' }}  placeholder ='请选择' onChange = { changeSupplierCode }>
                              {
                                canUseSupplierList && canUseSupplierList.map(item => {
                                  return <Option key ={ item.supplierId } value={item.supplierId}>{item.supplierName}</Option>
                              })
                              }
                            </Select>
                            </Form.Item>
                          </Col>
                      }
                    <Col span={6}>
                      <Form.Item
                        className={utilsStyles.antLightFormItem}
                        {...formItemLayout}
                        label="供应商代码"
                        name="materialInfo.materialSupplierList.supplierCode"
                        rules={[{ required: true, message: '请输入供应商代码' }]}
                      >
                        <Input placeholder="请输入" readOnly = { isReadOnly }  readOnly disabled={true} />
                      </Form.Item>
                    </Col>
                    <Col span={6}>
                      <Form.Item
                        className={classNames(utilsStyles.antFormItem)}
                        {...formItemLayout}
                        name="materialInfo.materialSupplierList.materialPrice"
                        rules={[{ required: true, message: '请输入单价' }]}
                        label="单价"
                      >
                        <InputNumber placeholder="请输入"  readOnly = { isReadOnly } disabled = { isDisabled }  min ={ 0 } style={{width:'100%'}}  />
                      </Form.Item>
                    </Col>
                    <Col span={6}>
                      <Form.Item className={utilsStyles.antFormItem} {...formItemLayout} label="品牌"
                        name="materialInfo.materialSupplierList.brand"
                      >
                        <Input placeholder="请输入" readOnly = { isReadOnly } disabled = { isDisabled } />
                      </Form.Item>
                    </Col>
                    <Col span={6}>
                      <Form.Item
                        className={classNames(utilsStyles.antFormItem)}
                        {...formItemLayout}
                        name="materialInfo.materialSupplierList.produceArea"
                        label="产地"
                      >
                        <Input placeholder="请输入" readOnly = { isReadOnly }  disabled = { isDisabled } />
                      </Form.Item>
                    </Col>
                  
                    <Col span={6}>
                      <Form.Item
                        {...formItemLayout}
                        className={utilsStyles.antFormItem}
                        label="更换周期"
                        name="replaceCycle"
                        rules={[{ required: 'true', message: '请输入更换周期' }]}
                      >
                        <Input placeholder="请输入"  readOnly = { isReadOnly } style={{width:'100%'}} />
                      </Form.Item>
                    </Col>

                    <Col span={6}>
                      <Form.Item
                        {...formItemLayout}
                        className={utilsStyles.antLightFormItem}
                        label="保质期"
                        name="validityTerm"
                      >
                        <Input placeholder="请输入"  addonAfter ="月" step={1} readOnly = { isReadOnly } />
                      </Form.Item>
                    </Col>
                    <Col span={6}>
                      <Form.Item
                        className={utilsStyles.antLightFormItem}
                        {...formItemLayout}
                        label="采购周期"
                        name='purchaseCycle'
                      >
                       <Input placeholder="请输入" readOnly = { isReadOnly } style={{width:'100%'}}  />
                      </Form.Item>
                    </Col>
                    <Col span={6}>
                      <Form.Item
                        className={utilsStyles.antLightFormItem}
                        {...formItemLayout}
                        label="关联设备"
                        name='deviceRelation.deviceId'
                        rules={[{ required: 'true', message: '请选择' }]}
                      >
                        <Select allowClear placeholder="请选择" style={{ width: '100%' }} mode='multiple'>
                          {deviceSettingByType && deviceSettingByType.map(item => {
                              return <Select.Option key={item.id} readOnly = { isReadOnly }>
                                  {item.dicValue}
                                </Select.Option>
                            })}
                        </Select>
                      </Form.Item>
                    </Col>
                  
                    <Col span={6}>
                      <Form.Item
                        className={classNames(utilsStyles.antLightFormItem)}
                        {...formItemLayout}
                        label="库存数量"
                        name="stockNum"
                        rules={[{ required: 'true', message: '请输入库存数量' }]}
                      >
                        <InputNumber placeholder="请输入" readOnly = { isReadOnly } min ={ 0 } style={{width:'100%'}} disabled = { type === 'add' ? false : isDisabled }  />
                      </Form.Item>
                    </Col>
                    <Col span={6}>
                      <Form.Item
                        className={classNames(utilsStyles.antFormItem)}
                        {...formItemLayout}
                        label="安全库存"
                        name="safeStockNum"
                        rules={[{ required: 'true', message: '请输入安全库存' }]}
                      >
                        <InputNumber min={0} placeholder="请输入" readOnly = { isReadOnly } style={{width:'100%'}} />
                      </Form.Item>
                    </Col>
                    <Col span={6}>
                      <Form.Item
                        className={utilsStyles.antFormItem}
                        {...formItemLayout}
                        label="临近预警值"
                        name='temporaryWarning'
                        rules={[{ required: true, message: '请输入关联设备' }]}
                      >
                          <InputNumber min={0} placeholder="请输入" readOnly = { isReadOnly } style={{width:'100%'}}  />
                      </Form.Item>
                    </Col>
                    <Col span={6}>
                      <Form.Item
                        className={utilsStyles.antFormItem}
                        {...formItemLayout}
                        label="库存状态"
                        name='materialStatus'
                        initialValue = {standDetail?.materialInfo?.materialStatus  ? standDetail?.materialInfo?.materialStatus : '105'}
                        rules={[{ required: true, message: '请选择' }]}
                      >
                        <Select style={{ width: '100%' }} allowClear readOnly = { isReadOnly } placeholder='请选择'>
                          <Option value="105" key="105">正常</Option>
                          <Option value="110" key="110">呆滞</Option>
                          <Option value="100" key="100">报废</Option>
                        </Select>
                      </Form.Item>
                    </Col>
                    <Col span={6} className={classNames(utilsStyles.gutterTrBg)}></Col>
                  </Row>
          }
          {
            (type === 'view' || type === 'verifyView') && <StandForm data={ standDetail } isReadOnly={isReadOnly} isDisabled={isDisabled} />
          }

          <Row style={{ marginTop: 15 }}>
            <Col span={24}>
              <Form.Item label="备注" className={classNames(utilsStyles.verticalLabel)} name='remarks'>
                <Input.TextArea rows={4} placeholder="请输入备注" allowClear showCount = { type !== 'edit' && isDisabled ? false : true} disabled ={ (type !== 'edit' && type !== 'add' && isDisabled) ? true : false } maxLength={50} />
              </Form.Item>
            </Col>
          </Row>
                  <Row style={{ marginTop: 15 }}>
                    <Col span={12}>
                        <Form.Item
                            label="物料图片："
                            name="picture"
                            rules={[{ required: isSelect ? false :  true, message: `请上传物料图片` }]}
                            initialValue ={ standDetail?.materialInfo?.picture ? [standDetail?.materialInfo?.picture] : [] }
                          >
                          {
                                ( type === 'add' && !hasFindCode) && <UploadFile
                                        listType="picture-card"
                                        className="avatar-uploader"
                                        showUploadList={true}
                                        beforeUpload={beforeUpload}
                                        maxCount={1}
                                    >
                                  <PlusOutlined style={{display:'block',fontSize:16}} />
                                <div>上传图片</div>
                          </UploadFile> || 
                                standDetail?.materialInfo?.picture && <img src={ standDetail?.materialInfo?.picture } className = { classNames(utilsStyles.imgPhoto,utilsStyles.imgMid)} /> || <Empty />
                          }
                        </Form.Item>
                    </Col>
                  </Row>
                </Card>
              
                <Card style={{ marginTop: 15 }}>
          <h3 className={classNames(utilsStyles.comTitleBar)}>文件信息</h3>
            { type ==='add' && !hasFindCode &&  <Row style={{ marginTop: 20 }}>
                  <Col span={6} lg={ 12 }>
                    <div style={{ paddingBottom: 20 }}>
                        <Form.Item
                          label=""
                          name="fileUploadInfo"
                          labelCol={{ span: 4 }}
                          wrapperCol={{ span: 20 }}
                          initialValue = {standDetail?.materialInfo?.fileInfo  ? standDetail?.materialInfo?.fileInfo : []}
                          >
                              <UploadFile
                                    fileType = 'document'
                                    showUploadList={true}
                                    isDragger = { true }
                                >
                                      <p className="ant-upload-drag-icon">
                                      <InboxOutlined />
                                  </p>
                                    <p className="ant-upload-text">点击或将文件拖拽到这里上传</p>
                                    <p className="ant-upload-hint">支持扩展名：.rar .zip .doc .docx .pdf .jpg...</p>
                              </UploadFile>
                          </Form.Item>
                    </div>
                  </Col>
            </Row>
          }
          {
             (type === 'view' || type === 'verifyView' || type === 'edit' || hasFindCode ) && <Row><Col span = { 24 }>
                 <DownloadUrlFile data = { standDetail?.materialInfo?.fileInfo } />
             </Col>
             </Row>
          }
         
          {  (type === 'add' || type ==='edit') && <OperateFooterBar handleClose={handleClose} handleSubmit={handleSubmit} submitLoading ={submitLoading} />}
            </Card>
                {
                  ( type === 'auditView' || type === 'audit' || type === 'verifyView') && <Card style={{ marginTop: 15 }} title='工单流程'>
                    <div style={{ padding: '10px 0' }}>
                        {/* ============箭头流程======= */}
                        <div style={{ padding: '10px 0' }}>
                            <StepGroupBar data = { orderProcessBOS || [] }  auditDetail = { auditDetail }   />
                        </div>
                    </div>
                </Card>
                }
                {
                  (type === 'add' || type === 'edit') && <Card title='审批流程' style={{ marginTop: 15 ,display:(approvalDetail?.length > 0) ? 'block' : 'none '}} ><ShowApproval businessType={ApproveType.inventoryType} /></Card>
                }
          </Form>
    </div>
  );
};

export default connect(({ ware,dict,universal, loading,materialInfo }) => ({
  ware,dict,universal,materialInfo,
  queryLoading: loading.models.ware,
  submitLoading:loading.effects['ware/warehouse_service_account_patch']
}))(BookAdd);