react antd 计算公式 (+-*/)运算，回显

计算器的源码

计算器触发事件

源码

import { DictValueEnumObj } from '@/components/DictTag';
import { getDeptTree, getFormulaListAll, getListAll } from '@/services/Energy/Metering';

import { getListAllInfo, getDepartmentName } from '@/services/Energy/Calculation';
import { ProForm, ProFormText, ProFormTreeSelect } from '@ant-design/pro-components';
import { useIntl } from '@umijs/max';
import { Button, Cascader, Form, Modal, message, Tag } from 'antd';
import { DataNode } from 'antd/es/tree';
import React, { useEffect, useState, useRef } from 'react';
import './index.scss';
import _, { forEach } from 'lodash';
import { json } from 'express';
import Item from 'antd/es/list/Item';
export type RoleFormData = Record<string, unknown> & Partial<API.System.Role>;
let data = [];
export type RoleFormProps = {
  onCancel: (flag?: boolean, formVals?: RoleFormData) => void;
  onSubmit: (values: RoleFormData) => Promise<void>;
  open: boolean;
  values: Partial<API.System.Role>;
  menuTree: DataNode[];
  menuCheckedKeys: string[];
  statusOptions: DictValueEnumObj;
  currentRow: DictValueEnumObj;
};
let meterItemIdList: string | string[];
let operatorList: string;
let formula1List: string | string[];
let chanLiangList: any[] = [];
const RoleForm: React.FC<RoleFormProps> = (props) => {
  const [form] = Form.useForm();
  const { menuTree, menuCheckedKeys } = props;
  const [menuIds, setMenuIds] = useState<string[]>([]);
  const [treeData, setTreeData] = useState<[]>([]);
  const [treeDataString, setTreeDataString] = useState<any>([]);
  const [textData, setTextData] = useState<any>('');

  const [treeData1, setTreeData1] = useState<string[]>([]);
  const [treeData2, setTreeData2] = useState<string[]>([]);
  const [formulaBatch, setFormulaBatch] = useState<string[]>([]);
  const [meterItemIdBatch, setMeterItemIdBatch] = useState<string[]>([]);

  const [disabled, setDisabled] = useState<boolean>(true);
  const [disabled1, setDisabled1] = useState<boolean>(true);
  const [operator, setOperator] = useState<string[]>([]); //回显字典
  const [operator1, setOperator1] = useState<string>(); //回显字典
  const [operator2, setOperator2] = useState<string[]>([]); //回显字典
  const [statusTypeOptions, setStatusTypeOptions] = useState<any>([]);
  const [meterItemId, setMeterItemId] = useState<string[]>([]); //回显id

  const [meterItemIdFormula, setMeterItemIdFormula] = useState<string[]>([]); //回显id
  // const [meterItemIdFormula, setMeterItemIdFormula] = useState([]); //回显id
  const [formula1List, setFormula1List] = useState<any>([]); //回显id
  const [meterItemIdList, setMeterItemIdList] = useState<string[]>([]); //回显id
  const [statusOptions, setStatusOptions] = useState<string[]>([]);
  const [gongshi, setGongshi] = useState<string[]>([]);
  const cascaderCatergoryRef = useRef(null);
  const displayRender = (labels: string[]) => labels[labels.length - 1];

  const [roleName, setRoleName] = useState<string[]>([]);

  // const { statusOptions } = props;
  const childFun1 = (res: any) => {
    // let children = [];
    for (let itemChilf of res.children) {
      itemChilf['label'] = itemChilf.meterName;
      itemChilf['value'] = itemChilf.id;
      itemChilf['key'] = itemChilf.id;
      itemChilf['children'] = itemChilf.tbMeterInfoVoList || [];
      childFun1(itemChilf);
    }
  };
  const childFun = (res: any) => {
    if (res.tbMeterInfoVoList != null) {
      const opts: DictValueEnumObj = {};
      for (let itemChilf of res.tbMeterInfoVoList) {
        opts[itemChilf.id] = {
          text: itemChilf.id,
          label: itemChilf.meterName,
          value: itemChilf.id,
          tbMeterInfoVoList: childFun(itemChilf),
        };
      }
      return opts;
    }
    return;
  };
  const getlistFormula = () => {
    getFormulaListAll().then((res) => {
      // console.log(res);
      if (res.code === 200) {
        const opts2: DictValueEnumObj = {};
        res.data.map((item: any) => {
          item['label'] = item.indexName;
          item['value'] = item.id;
          opts2['B' + item.id] = {
            text: item.indexName,
            label: item.indexName,
            value: 'B' + item.id,
            key: 'B' + item.id,
            idString: item.idString,
            formulaString: item.formulaString,
          };
          return opts2;
        });
        setTreeData2(opts2);
      }
    });
  };
  const operaIndexOf = (itemList: any, key: any) => {
    console.log(itemList, key);
    for (let item of itemList) {
      if (item.indexOf('+') != -1) {
        console.log(item.split(key), '+');
        data.push(item.split(key));
        operaIndexOf(item.split(key), '-');
      }
    }
  };
  const getListJianZhi = (val: number) => {
    getListAllInfo(val).then((res: any) => {
      if (res.code === 200) {
        const opts2: DictValueEnumObj = {};
        res.data.map((item: any) => {
          item['label'] = item.indexName;
          item['value'] = item.id;
          opts2['A' + item.id] = {
            text: item.bcMeterDataTypeVo?.meterType,
            label: item.bcMeterDataTypeVo?.meterType,
            value: 'A' + item.id,
            key: 'A' + item.id,
          };
          return opts2;
        });
        setTreeData1(opts2);
        // let data = res.data.map((item: any) => {
        //   item['label'] = item.bcMeterDataTypeVo?.meterType;
        //   item['value'] = 'A'+item.id;

        //   return item;
        // });
        // setTreeData1(data);
        // getlistFormula(val[val.length - 1]);
      }
    });
  };
  const getChanliang = () => {
    let data = [
      { deptId: 'C' + 101, deptName: '经典薄片车间产量' },
      { deptId: 'C' + 102, deptName: '新型薄片车间产量' },
    ];
    chanLiangList = data;
    // chanLiangList = data?.map(res=>{
    //   res.deptId = 'C' + res.deptId
    //   return res
    // });
    // getDepartmentName().then((res: { code: number; data: any[]; }) => {
    //   if (res.code === 200) {
    //     console.log(res)
    //     chanLiangList = res.data?.map(res=>{
    //       res.deptId = 'C' + res.deptId
    //       return res
    //     });
    //   }
    // })
  };
  useEffect(() => {
    getChanliang();
    form.resetFields();
    setTreeData([]);

    form.setFieldsValue({
      deptId: props.values.deptId,
      geo: props.values.geo,
      domain: props.values.domain,
      metric: props.values.metric,
      deptName: props.values.deptName,
      digitNum: props.values.digitNum,
      generateType: props.values.generateType,
      groupFlag: props.values.groupFlag,
      indexCode: props.values.indexCode,
      indexName: props.values.indexName,
      indexType: props.values.indexType,
      kpiDetailId: props.values.kpiDetailId,
      kpiFlag: props.values.kpiFlag,
      mediumId: props.values.mediumId,
      meterItemId: props.values.meterItemId,
      meteringUnitId: props.values.meteringUnitId,
      indexNo: props.values.indexNo,
      isEdit: props.values.isEdit,

      formula1: props.values.operator,
      meterItemIdBatch: props.values.meterItemIdBatch,
      formulaBatch: props.values.formulaBatch,
      operator: props.values.operator,
      id: props.values.id,
      formula: props.values.formula,
      bcEnergyMediumVoProduct: props.values.bcEnergyMediumVoProduct,
      bcMeteringUnit: props.values.bcMeteringUnit,
    });
    let operator = props.values?.operator;
    console.log(operator, form.getFieldValue(), props.currentRow);
    if (operator) {
      operator = [operator];
      operator.forEach((res: any) => {
        console.log(res, [res]?.slice('+'));
        if (res.indexOf('+') != -1) {
          // operator  = res.split('')
          console.log(operator.join(''), '+');
          operaIndexOf(operator, '+');
        }
      });
      console.log(operator);
    }
    getDeptTree().then((res: any) => {
      const exKeys = [];
      exKeys.push('1');
      // console.log(res);
      res.forEach((item: any) => {
        item['label'] = item.meterName;
        item['value'] = item.id;
        item['children'] = item.tbMeterInfoVoList || [];
        childFun1(item);
      });
      setTreeData(res);
      const opts: DictValueEnumObj = {};
      res.forEach((item: any) => {
        opts[item.id] = item;
      });
      setTreeDataString(opts);
      setTreeDataString(_.cloneDeep(opts));
    });
    getlistFormula();
    setRoleName([]);
    setOperator([]);
    // setMeterItemId([]);
    setMeterItemIdFormula([]);
    form.setFieldsValue({
      // formula: '',
      // formula1: '',
    });
    setRoleName([]);
    setOperator([]);
    setMeterItemIdFormula([]);
    // console.log(props.values.operator.split());
    setOperator2([]);
    setMeterItemId([]);
    setFormulaBatch([]);
    setMeterItemIdBatch([]);
    if (props.values.id) {
      setMeterItemIdFormula(props.values.formula.split());
      console.log(props.values.operator.split());
      setOperator2(props.values.operator.split());
      setMeterItemId(props.values.meterItemId.split());
      setFormulaBatch(props.values.formulaBatch.split());
      setMeterItemIdBatch(props.values.meterItemIdBatch.split());
      console.log(props.values, 'props', props.values?.meterItemId, formula1List);
      let zhibiao = props.values?.meterItemId?.split(/\s*(,)\s*/);
      operatorList = props.values?.operator;
      setFormula1List(props.values?.formula?.split(/\s*(\+|-|\*|\/)\s*/));
      setMeterItemIdList(props.values?.meterItemId);
      // meterItemIdList = props.values?.meterItemId;
      // formula1List = props.values?.formula
      return;
    }
  }, [form, props]);

  const intl = useIntl();
  const handleOk = () => {
    form.submit();
  };
  const handleCancel = () => {
    props.onCancel();
  };
  const handleFinish = async (values: Record<string, any>) => {
    props.onSubmit({ ...values, menuIds } as RoleFormData);
  };

  const jiData = [
    [
      { lable: '(', value: 18 },
      { lable: ')', value: 17 },
      { lable: 'AC', value: 16 },
      { lable: '/', value: 15 },
    ],
    [
      { lable: '7', value: 7 },
      { lable: '8', value: 8 },
      { lable: '9', value: 9 },
      { lable: '*', value: 14 },
    ],
    [
      { lable: '4', value: 4 },
      { lable: '5', value: 5 },
      { lable: '6', value: 6 },
      { lable: '-', value: 13 },
    ],
    [
      { lable: '1', value: 1 },
      { lable: '2', value: 2 },
      { lable: '3', value: 3 },
      { lable: '+', value: 12 },
    ],
    [
      { lable: '0', value: 0 },
      { lable: '.', value: 9 },
      { lable: '=', value: 10 },
    ],
  ];
  // 数据类型
  const getListAllType = (val: any) => {
    getListAll(val[0]).then((res: any) => {
      if (res.code === 200) {
        const opts: DictValueEnumObj = {};

        res.data.forEach((item: any) => {
          item['label'] = item.meterType;
          item['value'] = item.id;

          opts[item.id] = {
            text: item.meterType,
            label: item.meterType,
            value: item.id,
            key: item.id,
            meteringUnitId: item.meteringUnitId,
          };
        });
        // console.log(opts);
        setStatusTypeOptions(opts);
      }
    });
  };

  const dataString1 = (element: any, item: any) => {
    console.log(item, element);
    if (
      item.tbMeterInfoVoList?.length > 0 &&
      item.tbMeterInfoVoList &&
      item.tbMeterInfoVoList != null
    ) {
      let data = item.tbMeterInfoVoList.map((itemChild) => {
        if (element === itemChild.id) {
          console.log(item);
          // text = itemChild.meterName;
          return setTextData(itemChild.meterName);
        }

        return dataString1(element, itemChild);
      });
    }
  };

  const onChange = (val: any) => {
    // console.log(val,treeDataString[val[0]]);
    console.log(treeDataString, val);
    if (!val) return;
    let text = '';
    val.forEach((element: any, index: any) => {
      // console.log(element,index,treeDataString[val[index]])
      if (val.length > 1) {
        // let data = dataString(treeDataString[val[0]].tbMeterInfoVoList,element,val)
        // console.log(data)
        for (let item of treeDataString[val[0]].tbMeterInfoVoList) {
          if (element === item.id) {
            console.log(item);
            text = item.meterName;
            setTextData(text);
            dataString1(val[val.length - 1], item);
          }
        }
      }
    });

    getListAllType(val);
    form.setFieldsValue({
      deptId1: '',
    });
    getListJianZhi(val[val.length - 1]);
  };

  return (
    <Modal
      width={700}
      title={'计算公式'}
      forceRender
      open={props.open}
      destroyOnClose
      onOk={() => {
        let label = meterItemIdFormula ? meterItemIdFormula.join('') : '';
        form.setFieldsValue({
          formula: label,
        });
        // if (!label) {
        //   return;
        // }
        console.log(label);
        let verifyState = null; // 验证状态
        let str = label.replace(/ /g, ''); // 去掉空格
        const english = new RegExp('[A-Za-z]+'); // 字母
        // 判断字符串中是否存在加减乘除
        // console.log(str.length);
        for (let i = 0; i < str.length; i++) {
          if (english.test(str[i])) {
            // 找出汉字与字母并替换成 数字 1
            str = str.replaceAll(str[i], 1);
            // 判断字符串中是否存在加减乘除
            if (!str.match(/\*|-|[/]|[+]/)) {
              verifyState = false;
              break;
            }
          }
        }
        // 如果公式错误会出现报错信息
        try {
          // 构造函数
          // 执行字符串
          let makeFun = new Function('return ' + str);
          try {
            makeFun();
            verifyState = true;
            // console.log('语法正确', makeFun());

            handleOk();
          } catch (error) {
            verifyState = false;
            // console.log('语法', makeFun());
            message.warning('计算公式语法不正确');
          }
        } catch (errorInfo) {
          verifyState = false;
          // console.log('语法正确11');
          message.warning('计算公式语法不正确');
        }
        return verifyState;
      }}
      onCancel={handleCancel}
    >
      <ProForm
        form={form}
        grid={true}
        layout="horizontal"
        submitter={false}
        onFinish={(form) => {
          form['operator'] = operator2.join('');
          form['formula'] = meterItemIdFormula.join('');
          console.log(meterItemId);
          // console.log(props.values);
          if (props.values.id) {
            form['id'] = props.values.id;
          }
          form['bcEnergyMediumVoProduct'] = props.values.bcEnergyMediumVoProduct;
          form['bcMeteringUnit'] = props.values.bcMeteringUnit;
          form['deptId'] = props.values.deptId;
          form['geo'] = props.values.geo;
          form['domain'] = props.values.domain;
          form['metric'] = props.values.metric;

          form['deptName'] = props.values.deptName;
          form['digitNum'] = props.values.digitNum;
          form['generateType'] = props.values.generateType;
          form['groupFlag'] = props.values.groupFlag;
          form['indexCode'] = props.values.indexCode;
          form['indexName'] = props.values.indexName;
          form['indexType'] = props.values.indexType;
          form['kpiDetailId'] = props.values.kpiDetailId;
          form['kpiFlag'] = props.values.kpiFlag;
          form['mediumId'] = props.values.mediumId;
          form['meterItemId'] = meterItemId.join(',');
          form['meteringUnitId'] = props.values.meteringUnitId;
          form['indexNo'] = props.values.indexNo;
          form['isEdit'] = props.values.isEdit;
          // form['meterItemIdBatch'] =
          //   meterItemIdBatch.length > 0 ? meterItemIdBatch.join('') : props.values.meterItemIdBatch;
          form['meterItemIdBatch'] = props.values?.meterItemIdBatch || '';
          // form['formulaBatch'] =
          //   formulaBatch.length > 0 ? formulaBatch.join('') : props.values.formulaBatch;

          form['formulaBatch'] = props.values.formulaBatch || '';
          console.log(form);
          handleFinish(form);
        }}
      >
        <ProFormText
          name="formula1"
          label="公式"
          colProps={{ md: 18, xl: 22 }}
          disabled={true}
          placeholder="请输入"
          rules={[
            {
              required: true,
              message: '请输入公式',
            },
          ]}
        />
        <span
          onClick={() => {
            form.setFieldsValue({
              formula: '',
              formula1: '',
            });
            setRoleName([]);
            setOperator([]);
            setMeterItemId([]);
            setMeterItemIdFormula([]);
            setOperator2([]);
          }}
        >
          清除
        </span>
        <div style={{ width: '60%' }}>
          <div style={{ display: 'flex' }}>
            <span
              style={{
                display: 'inline-block',
                width: '-webkit-fill-available',
                marginTop: '10px',
                marginLeft: '16px',
              }}
            >
              表计:
            </span>
            <div className="form-item1">
              <Cascader
                allowClear
                ref={cascaderCatergoryRef}
                expand-trigger="hover"
                changeOnSelect
                options={treeData}
                placeholder="请选择设备"
                displayRender={displayRender}
                onChange={onChange}
              />
            </div>

            <ProFormTreeSelect
              name="deptId1"
              // valueEnum={ }
              colProps={{ md: 12, xl: 8 }}
              placeholder="请选择数据项"
              valueEnum={treeData1}
              // valueEnum={treeData1}
              onChange={(val: any, option: any) => {
                // console.log(option, option.join(''));
                setDisabled(false);

                form.setFieldsValue({
                  operator: operator,
                });
                // console.log(operator2);
                console.log(option, cascaderCatergoryRef, treeDataString, textData);
                let textOption = option.map((res: string) => {
                  return textData + '.' + res;
                });
                let data = operator2.concat(textOption);
                setOperator1(textOption);
              }}
            />
            <Button
              disabled={disabled}
              onClick={() => {
                setRoleName([...roleName, form.getFieldsValue().deptId1]);
                setMeterItemId([...meterItemId, form.getFieldsValue().deptId1]);
                let data = operator2.concat(operator1);
                console.log(data, operator2, operator1, form.getFieldsValue());
                setOperator2(data);
                setMeterItemIdFormula([...meterItemIdFormula, form.getFieldsValue().deptId1]);
                let label = roleName ? roleName.join('') : '';
                console.log(operator2, operator1);

                // let data = operator2;
                form.setFieldsValue({
                  formula1: data.join(''),
                });

                form.setFieldsValue({
                  formula: label
                    ? label + form.getFieldsValue().deptId1
                    : form.getFieldsValue().deptId1,
                });
                setGongshi([...roleName, form.getFieldsValue().deptId1]);

                //二期修改 赋值
                operatorList = data.join('');
                console.log(formula1List);
                setFormula1List([...formula1List, form.getFieldsValue().deptId1]);
                setMeterItemIdList([...meterItemId, form.getFieldsValue().deptId1]);
                form.setFieldsValue({
                  deptId1: '',
                  deptId: '',
                });
                setDisabled(true);
                setOperator([...operator, operator1 ? operator1 : '']);
              }}
            >
              确认
            </Button>
          </div>
          <div style={{ marginLeft: '16px', marginBottom: '20px' }}>
            <p>产量：</p>
            {chanLiangList.length > 0 &&
              chanLiangList?.map((item) => (
                // eslint-disable-next-line react/jsx-key
                <Button
                  style={{ marginRight: '10px' }}
                  onClick={() => {
                    console.log(item);
                    setRoleName([...roleName, item.deptId]);
                    setMeterItemId([...meterItemId, item.deptId]);
                    let data = operator2.concat([item.deptName]);
                    console.log(data, operator2, operator1, item);
                    setOperator2(data);
                    setMeterItemIdFormula([...meterItemIdFormula, item.deptId]);
                    let label = roleName ? roleName.join('') : '';
                    console.log(operator2, operator1);

                    // let data = operator2;
                    form.setFieldsValue({
                      formula1: data.join(''),
                    });

                    form.setFieldsValue({
                      formula: label ? label + item.deptId : item.deptId,
                    });
                    setGongshi([...roleName, item.deptId]);

                    //二期修改 赋值
                    operatorList = data.join('');
                    // formula1List =[...formula1List, item.deptId]
                    // meterItemIdList = [...meterItemId, item.deptId]
                    console.log(formula1List);
                    setFormula1List([...formula1List, item.deptId]);
                    setMeterItemIdList([...meterItemId, item.deptId]);
                    form.setFieldsValue({
                      deptId: '',
                      deptId: '',
                    });
                    setDisabled(true);
                    setOperator([...operator, operator1 ? operator1 : '']);
                  }}
                >
                  {item.deptName}
                </Button>
              ))}
            {/* 
经典薄片车间产量
            
新型薄片车间产量
 */}
          </div>
          <div className="form-item" style={{ display: 'flex' }}>
            <ProFormTreeSelect
              name="deptId2"
              label="指标"
              valueEnum={treeData2}
              colProps={{ md: 12, xl: 20 }}
              placeholder="请选择指标"
              onChange={(val: any, option: any) => {
                setDisabled1(false);
                setOperator1(option);

                form.setFieldsValue({
                  operator: operator,
                  operator2: operator,
                });
              }}
            />
            <Button
              disabled={disabled1}
              onClick={() => {
                setRoleName([...roleName, form.getFieldsValue().deptId2]);
                setMeterItemId([...meterItemId, form.getFieldsValue().deptId2]);

                setMeterItemIdFormula([...meterItemIdFormula, form.getFieldsValue().deptId2]);
                let label = roleName ? roleName.join('') : '';
                let data = operator2.concat(operator1);
                // console.log(data, operator2, operator1, form.getFieldsValue());
                setOperator2(data);
                form.setFieldsValue({
                  formula: label
                    ? label + form.getFieldsValue().deptId2
                    : form.getFieldsValue().deptId2,
                });
                form.setFieldsValue({
                  formula1: operator2.length > 0 ? data.join('') : data.join(''),
                });
                setGongshi([...roleName, form.getFieldsValue().deptId2]);
                //二期修改 赋值
                console.log(formula1List, form.getFieldsValue());
                operatorList = operator2.length > 0 ? data.join('') : data.join('');
                setFormula1List([...formula1List, form.getFieldsValue().deptId2]);
                setMeterItemIdList([...meterItemId, form.getFieldsValue().deptId2]);
                form.setFieldsValue({
                  deptId1: '',
                  deptId: '',
                  deptId2: '',
                });
                setDisabled1(true);
                setOperator([...operator, operator1 ? operator1 : '']);
              }}
            >
              确认
            </Button>
          </div>
        </div>
        <div style={{ width: '32%', marginLeft: '20px', textAlign: 'right' }}>
          {jiData.map((item, index) => (
            <div key={index}>
              {item.map((list, index1) => (
                <span
                  key={index1}
                  style={{
                    width: list.lable === '=' ? '100px' : '50px',
                    height: '50px',
                    background: '#fff',
                    lineHeight: '50px',
                    color: '#000',
                    display: 'inline-block',
                    textAlign: 'center',
                    fontSize: '18px',
                    border: '1px solid #999',
                  }}
                  onClick={() => {
                    console.log(formula1List);
                    if (list.lable === 'AC') {
                      // 二期修改
                      // 正则表达是去掉+-*/
                      let operator =
                        typeof operatorList === 'string'
                          ? operatorList?.split(/\s*(\+|-|\*|\/)\s*/)
                          : operatorList;
                      let meterItemId =
                        typeof meterItemIdList === 'string'
                          ? meterItemIdList?.split(/\s*(,)\s*/)
                          : meterItemIdList;
                      let Formula =
                        typeof formula1List === 'string'
                          ? formula1List?.split(/\s*(\+|-|\*|\/)\s*/)
                          : formula1List;
                      // 过滤已删除
                      operator = operator.filter((l) => l != '');
                      Formula = Formula.filter((l) => l != '');
                      // 后往前删
                      let operatorArr = operator.splice(operator.length - 1, 1);
                      let FormulaArr = Formula.splice(Formula.length - 1, 1);
                      console.log(Formula, FormulaArr);
                      // 一期
                      form.setFieldsValue({
                        formula: operator.join(''),
                        formula1: operator.join(''),
                      });
                      // 删除赋值
                      operatorList = operator.filter((l) => l != '').join('');
                      setFormula1List(Formula.filter((l) => l != '').join(''));
                      console.log(Formula.join('').replace(/[(+|\-|*|/)]/g, ','));
                      let list = Formula.join('').replace(/[(+|\-|*|/)]/g, ',');
                      console.log(list.split());
                      setRoleName([]);
                      setOperator(operator);
                      setGongshi([]);
                      setMeterItemId(list.split());
                      setOperator2(operator);
                      setMeterItemIdFormula(Formula);
                      return;
                    }
                    let label = roleName ? roleName.join('') : '';
                    form.setFieldsValue({
                      formula: label ? label + list.lable : list.lable,
                    });
                    let data = operator2.concat([list.lable]);
                    setOperator2(data);
                    let label1 = operator2 ? operator2.join('') : '';
                    console.log(label1, list, operator, operator2);
                    form.setFieldsValue({
                      formula1: label1 ? label1 + list.lable : list.lable,
                    });
                    console.log(operator, 'operator');
                    setRoleName([...roleName, list.lable]);
                    // let meterItem = meterItemId ? meterItemId.join('') : '';
                    let MeterItemId = meterItemIdFormula.concat([list.lable]);
                    console.log(MeterItemId.join(''), MeterItemId);
                    setMeterItemIdFormula(MeterItemId);
                    setMeterItemIdFormula(_.cloneDeep(MeterItemId));
                    console.log(meterItemIdFormula);
                    setGongshi([...roleName, list.lable]);
                    setOperator([...operator, list.lable]); //回显
                    //二期修改 赋值
                    operatorList = data.join('');
                    setFormula1List([...formula1List, list.lable]);
                    setMeterItemIdList(meterItemId);
                    form.setFieldsValue({
                      operator: operator,
                    });
                  }}
                >
                  {list.lable}
                </span>
              ))}
            </div>
          ))}
        </div>
      </ProForm>
    </Modal>
  );
};

export default RoleForm;