WorkloadWeb/src/components/Flow/node/rect/mapServe.tsx

import React, { useState, useEffect } from 'react';
import { FlowchartFormWrapper } from '@antv/xflow';
import { Button, message, Select } from 'antd';
import LuckyExcel from 'luckyexcel';
import {
  Position,
  Size,
  ColorPicker,
  InputNumberFiled,
  InputFiled,
  UploadFiled,
  RadioField,
} from '../fields';
import { PREFIX } from '../constants';
import { UnityAction } from '@/utils/utils';
import { connect } from 'dva';

interface ExcelInfo {
  file_name?: string;
  excel_cols?: any;
}

export interface IConfig {
  label?: string;
  x?: number;
  y?: number;
  width?: number;
  height?: number;
  fontSize?: number;
  count?: number;
  fontFill?: string;
  fill?: string;
  stroke?: string;
  muti_version?: string | number;
  is_start_node?: string | number;
  bom_template?: string;
  version_name?: string;
  data?: any;
  excel_info?: ExcelInfo;
  role_list?: string;
}

const defaultConfig: IConfig = {
  muti_version: 1,
  is_start_node: 0,
  excel_info: { file_name: '' },
};

const Component = (props: any) => {
  const { config, plugin = {}, roleList } = props;
  const { updateNode } = plugin;
  const [options, setOptions] = useState([]);
  const [fileName, setFileName] = useState('');
  const [nodeConfig, setNodeConfig] = useState<IConfig>({
    ...defaultConfig,
    ...config,
  });
  const onNodeConfigChange = (key: string, value: number | string | object) => {
    if (key) {
      setNodeConfig({
        ...nodeConfig,
        [key]: value,
      });
      updateNode({
        [key]: value,
      });
    } else if (value instanceof Object) {
      setNodeConfig({
        ...nodeConfig,
        ...value,
      });
      updateNode({
        ...value,
      });
    }
  };

  const onSave = () => {
    UnityAction.emit('NODE_SAVE', nodeConfig);
  };

  const beforeUpload = (file: any) => {
    LuckyExcel.transformExcelToLucky(file, (exportJson, luckysheetfile) => {
      if (exportJson.sheets == null || exportJson.sheets.length == 0) {
        message.error('读取xlsx文件失败!');
        return;
      }
      console.log(exportJson);
      const sheet = exportJson.sheets[0];
      let titleCell = [];
      sheet.celldata.forEach(item => {
        if (item.r == 0) {
          // 标题头
          titleCell.push(item);
        }
        // 生成cid
        item.v.cid = `${item.r}-${item.c}`;
      });
      let cell = titleCell.map(item => {
        let value = '';
        if (item.v?.v) {
          value = item.v?.v;
        } else if (item.v.ct?.s && item.v.ct?.s instanceof Array) {
          value = item.v.ct.s.map(item => item?.v).join?.('');
        }
        return { sheet_name: sheet.name, col_idx: item.r, col_axis: item.c, col_value: value };
      });
      onNodeConfigChange(null, {
        data: [sheet],
        excel_info: {
          file_name: file.name,
          excel_cols: cell,
        },
      });
    });
  };

  useEffect(() => {
    setNodeConfig({
      ...defaultConfig,
      ...config,
    });
  }, [config]);

  const updataFileName = (name: string) => {
    var idx = name?.lastIndexOf('/');
    let str = name.substring(idx + 1, name.length);
    setFileName(str);
  };

  useEffect(() => {
    if (config.bom_template) updataFileName(config.bom_template);
    if (nodeConfig.excel_info?.file_name) updataFileName(nodeConfig.excel_info.file_name);
  }, [nodeConfig.bom_template, nodeConfig.excel_info.file_name]);
  // console.log(nodeConfig, config)

  useEffect(() => {
    if (!roleList || roleList.length <= 0) return;
    let op = [];
    console.log(roleList);
    roleList
      .filter(cur => cur.RoleType == 4)
      .forEach(item => {
        op.push({ label: `${item.Name}(${item.ID})`, value: item.ID });
      });
    setOptions(op);
    console.log(op);
  }, [roleList]);

  // const handleFileNameClick = () => {
  //   if (nodeConfig.bom_template) window.open(nodeConfig.bom_template);
  // };

  return (
    <div className={`${PREFIX}-panel-body`}>
      <div className={`${PREFIX}-panel-group`}>
        <h5>内容</h5>
        <InputFiled
          label="标题"
          value={nodeConfig.label}
          onChange={value => {
            onNodeConfigChange('label', value);
          }}
        />
      </div>
      <div className={`${PREFIX}-panel-group`}>
        <h5>数据</h5>
        <RadioField
          label="多个版本"
          value={nodeConfig.muti_version}
          onChange={value => {
            onNodeConfigChange('muti_version', value);
          }}
          options={[
            { label: '是', value: 1 },
            { label: '否', value: 0 },
          ]}
        />
        <RadioField
          label="起始起点"
          value={nodeConfig.is_start_node}
          onChange={value => {
            onNodeConfigChange('is_start_node', value);
          }}
          options={[
            { label: '是', value: 1 },
            { label: '否', value: 0 },
          ]}
        />
        {nodeConfig.is_start_node == 1 && (
          <>
            <InputFiled
              label="模板名称"
              value={nodeConfig.version_name}
              onChange={value => {
                onNodeConfigChange('version_name', value);
              }}
            />
            <UploadFiled
              label="模板"
              onChange={url => onNodeConfigChange('bom_template', url)}
              beforeUpload={beforeUpload}
            />
            {/* <div onClick={handleFileNameClick}>{fileName}</div> */}
            <a href={nodeConfig.bom_template}>{fileName}</a>
          </>
        )}
        <div className="group">
          <label>权限</label>
          <Select
            value={
              nodeConfig.role_list ? nodeConfig.role_list.split(',').map(item => Number(item)) : []
            }
            mode="multiple"
            allowClear
            style={{ width: '100%' }}
            placeholder="选择权限"
            onChange={(v: number[]) => {
              onNodeConfigChange('role_list', v.join(','));
            }}
            options={options}
          />
        </div>
      </div>
      <div className={`${PREFIX}-panel-group`}>
        <h5>样式</h5>
        <Position
          x={nodeConfig.x}
          y={nodeConfig.y}
          onChange={(key, value) => {
            onNodeConfigChange(key, value);
          }}
        />
        <Size
          width={nodeConfig.width}
          height={nodeConfig.height}
          onChange={(key, value) => {
            onNodeConfigChange(key, value);
          }}
        />
        <ColorPicker
          label="填充"
          value={nodeConfig.fill}
          onChange={(value: string) => {
            onNodeConfigChange('fill', value);
          }}
        />
        <ColorPicker
          label="边框"
          value={nodeConfig.stroke}
          onChange={(value: string) => {
            onNodeConfigChange('stroke', value);
          }}
        />
        <InputNumberFiled
          label="消息数量"
          value={nodeConfig.count}
          onChange={value => {
            onNodeConfigChange('count', value);
          }}
        />
        <div style={{ display: 'flex' }}>
          <InputNumberFiled
            label="字号"
            value={nodeConfig.fontSize}
            width={68}
            onChange={value => {
              onNodeConfigChange('fontSize', value);
            }}
            style={{ marginRight: 10 }}
          />
          <ColorPicker
            value={nodeConfig.fontFill}
            onChange={(value: string) => {
              onNodeConfigChange('fontFill', value);
            }}
          />
        </div>
      </div>
      <Button type="primary" onClick={onSave}>
        保存
      </Button>
    </div>
  );
};

function RecthServe(props: any) {
  return (
    <FlowchartFormWrapper {...props}>
      {(config, plugin) => <Component {...props} plugin={plugin} config={config} />}
    </FlowchartFormWrapper>
  );
}

export default connect(({ flow }) => ({ roleList: flow.roleList }))(RecthServe);