CostAccountManaSys/src/pages/responsibilityCenter/updateForm.jsx

import React,{useState} from 'react';
import {
  ProFormSelect,
  ProFormText,
  ModalForm,
  ProFormDependency
} from '@ant-design/pro-form';
import { useIntl, FormattedMessage } from 'umi';

import { getApportionmentLevelListNoPage } from '../apportionmentLevel/service';


const UpdateForm = (props) => {
  const { updateModalVisible, updateModalVisibleChange, values, onSubmit } = props;
  const [selectedLevelList,setSelectedLevelList] = useState(null); //可选的分摊层级列表
  const [selectedLevel,setSelectedLevel] = useState(null);
  // console.log({values});
  return (
    <>
      {
        JSON.stringify(values) !== '{}' && <ModalForm
          title="编辑医院"
          width="800px"
          initialValues={{ ...values }}
          labelCol={{ span: 5, offset: 3 }}
          layout={'horizontal'}
          visible={updateModalVisible}
          onVisibleChange={(visible) => updateModalVisibleChange(visible)}
          onFinish={(value) => onSubmit({ ...values, ...value })}
        >
          <ProFormText
            label="责任中心名"
            rules={[
              {
                required: true,
                message: (
                  <FormattedMessage id="pages.searchTable.responsibilityName" defaultMessage="医院名是必填项" />
                ),
              },
            ]}
            width="sm"
            name="responsibilityName"
          />
          <ProFormSelect
            rules={[
              {
                required: true,
                message: (
                  <FormattedMessage id="pages.searchTable.isGatherCenter" defaultMessage="请选择是否为汇总中心" />
                ),
              },
            ]}
            options={[
              {
                value: 1,
                label: '是',
              },
              {
                value: 0,
                label: '否',
              },
            ]}
            width="sm"
            name="isGatherCenter"
            label="是否汇总中心"
          />
          <ProFormSelect
            rules={[
              {
                required: true,
                message: (
                  <FormattedMessage id="pages.searchTable.responsibilityType" defaultMessage="请选择责任类型" />
                ),
              },
            ]}
            options={[
              {
                value: 1,
                label: '收费中心',
              },
              {
                value: 2,
                label: '成本(费用)中心',
              },
            ]}
            width="sm"
            name="responsibilityType"
            label="选择责任类型"
          />
          <ProFormSelect
          rules={[
            {
              required: true,
              message: (
                <FormattedMessage id="pages.searchTable.shareLevel" defaultMessage="请选择分摊级别" />
              ),
            },
          ]}
          request={ async ()=>{
                const resp = await getApportionmentLevelListNoPage();
                const {status,data} = resp;
                if(status==200){
                    setSelectedLevelList(data.list);
                    return data.list.map(item=>({label:item.leverSort,value:item.leverSort}))
                }else{
                   return []
                }
          }}
          width="sm"
          name={['shareLevel']}
          label="选择分摊级别"
        />

        <ProFormDependency name={['shareLevel']}>
          {({shareLevel}) => {
  
            let name='12',render=false;
            if(shareLevel&&selectedLevelList&&selectedLevelList.length>0){
              const arr = selectedLevelList.filter(item=>item.leverSort == shareLevel);
              // console.log({arr,selectedLevelList,shareLevel});
              if(arr.length>0){
                name = arr[0].shareName;
                setSelectedLevel(arr[0]);
                render=true;
              }
              
            }
            // console.log({name});
            return shareLevel&&render ? (
              <ProFormText
                initialValue={name}
                disabled
                label="分摊层级名称"
                rules={[
                  {
                    required: false,
                    message: (
                      <FormattedMessage id="pages.searchTable.parentName" defaultMessage="..." />
                    ),
                  },
                ]}
                placeholder={name}
                width="sm"
              />
            ) : <></>;
          }}
        </ProFormDependency>
        </ModalForm>
      }
    </>
  );
};

export default UpdateForm;