handlers.js 8.92 KB
Newer Older
陈龙's avatar
陈龙 committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274
import style from '../ReportsManage.less';
import extraComponents from '../extra/extraComponents';
import moment from 'moment';
import { Tag } from 'antd';
import { hasMoney, isNumber, returnHandledNumber } from './utils';
import { tagColors, tagBackgroundColors } from './constant';

/**
 * @params: config下的数值的configRule结构如下,[{最大值: 10,最小值: 0,颜色:'#AAAAAA'}];
 * @business: configRule有值,则按照configRule设置;没有,按照color设置; 有最大值,无最小值;['', 1]
 *            有最大值,有最小值;[2,
 *
 *        10]
 *            有最小值,无最大值;[11,'']
 */
// 链接 功能 弹窗功能待提出需求
// 函数名、属性、...
const clickLink = (config) => {
  return window.open(config.configItems, '_blank');
};
const handleUrl = (allWidgets, config) => {};
const handleConfigUrl = (config, record) => {
  let _configs = config.configItems.split('|');
  // type = 替换|跳转;
  let _type = '';
  //url=project/pandawork/contractDetails/index?ageSize=100&accountName=软件订单台账|contractCode=${订单编号}|company=${分公司}
  let _url = '';
  let _params = {};
  _configs.forEach((item) => {
    if (item.includes('type=')) _type = item.replace('type=', '');
    if (item.includes('url=')) {
      let _tempUrl = item.replace('url=', '');
      let _urlArray = _tempUrl.split('?');
      if (_urlArray[1]) {
        _urlArray[1].split('&').forEach((param) => {
          let _paramArr = param.split('=');
          if (_paramArr[1] && _paramArr[1].includes('${') && _paramArr[1].includes('}')) {
            let _key = _paramArr[1].replace(/\$\{|\}/g, '');
            _params[_paramArr[0]] = record[_key];
          } else {
            _params[_paramArr[0]] = _paramArr[1];
          }
        });
      }
      _url = _urlArray[0];
    }
  });
  return { url: _url, type: _type, params: _params };
};
const clickWidget = (config, text, record, showComponents, setDetailsConfig) => {
  // 功能跳转接口
  // type=替换|url=product/ReportsManage/ReportsSetting?accountName=${ID}&pageSize=100&title=${name}
  if (!config.configItems) return message.error('未配置跳转信息');
  // setDetailsComponentVisible(true);
  showComponents(true);
  let urlConfig = handleConfigUrl(config, record);
  // setDetailConfig(urlConfig);
  setDetailsConfig(urlConfig);
};
const clickModal = (config, showModal, setExtra) => {
  let _splitArr = config.configItems.split('&');
  let _fn = _splitArr[0] || 'default';
  _splitArr.splice(0, 1);
  let _data = {};
  _splitArr.forEach((item) => {
    let _item = item.split('=');
    _data[_item[0]] = _item[1];
  });
  // setExtraModal(true);
  showModal(true);
  return setExtra(extraComponents[_fn](_data));
};
const returnOpacity = (rgba) => {
  if (!rgba) rgba = 'rgba(0,0,0,.65)';
  let _str = rgba.replace('rgba(', '').replace(')', '');
  let _splitStr = _str.split(',');
  return `rgba(${_splitStr[0]},${_splitStr[1]},${_splitStr[2]},.25)`;
};
export const handleNumber = (config, number) => {
  let _color = '';
  let _number;
  if (number) _number = Number(number); // 当设置精度后,会被转成字符串
  if (config.type === '数值' && config.numericalConfigs && config.numericalConfigs.length) {
    config.numericalConfigs.forEach((item) => {
      // 接口对于数值类型的返回为null
      if (!_color) {
        let _max = isNumber(item.maxValue) ? item.maxValue : '';
        let _min = isNumber(item.minValue) ? item.minValue : '';
        if (_max !== '' && _min === '') {
          _color = _number <= Number(_max) ? '' : item.color;
        } else if (_min !== '' && _max === '') {
          _color = _number > Number(_min) ? item.color : '';
        } else {
          _color = _number > Number(_min) && _number <= Number(_max) ? item.color : '';
        }
      }
    });
  } else if (config.type === '数值标签' && config.labelConfigs && config.labelConfigs.length) {
    console.log('数值标签');
    _color = 'red';
  } else if (config.color) {
    _color = config.color;
  }
  return number ? (
    <span>
      <span
        className={style.prefixOrSuffix}
        style={{
          color: _color,
        }}
      >
        {config.prefix || ''}
      </span>
      <span
        style={{
          color: _color,
          margin: '0 5px',
        }}
      >
        {returnHandledNumber(config.configItems, number)}
      </span>
      <span className={style.prefixOrSuffix} style={{ color: _color }}>
        {config.suffix || ''}
      </span>
    </span>
  ) : (
    '-'
  );
};
export const handleNumberTag = (config, number) => {
  let _color = '';
  let _map = {};
  // 标签需要设置分隔符 2022年7月13日 ChenLong
  let _configItems = config.configItems.split('|');
  let _configMap = {};
  _configItems.forEach((item) => {
    let _arr = item.split('=');
    _configMap[_arr[0]] = _arr[1];
  });
  // 处理label的颜色
  if (config.labelConfigs && config.labelConfigs.length) {
    config.labelConfigs.forEach((item) => {
      _map[item.labelValue] = item.color;
    });
  }
  _color = config.color || 'rgba(0,0,0,.85)';
  // String(text)为了解决可能存在数值类型的数据需要设置成标签的需求
  // return String(text).split(_configMap['分隔符']).map(item => <Tag color={_map[item]}>{item}</Tag>);
  // let a = 'abc' a.split(undefined); a = ['abc']
  return (
    <Tag
      style={{
        background: mapTag(_map, number) || _color,
        border: `1px solid ${mapTag(_map, number) || _color}`,
        borderRadius: 2,
        color: mapTag(_map, number)
          ? tagColors[tagBackgroundColors.findIndex((c) => c === mapTag(_map, number))]
          : `rgba(0, 0, 0, .65)`,
      }}
    >
      {(config.prefix || '') +
        returnHandledNumber(config.configItems, number) +
        (config.suffix || '')}
    </Tag>
  );
};
/** @params: 标签形态的configRule,[{标签值:'字符串',颜色: '#AAAAAA'}]; */
/* 支持正则配置 RegExp */
export const handleTag = (config, text) => {
  let _color = '';
  let _map = {};
  // 标签需要设置分隔符 2022年7月13日 ChenLong
  let _configItems = config.configItems.split('|');
  let _configMap = {};
  _configItems.forEach((item) => {
    let _arr = item.split('=');
    _configMap[_arr[0]] = _arr[1];
  });
  // 处理label的颜色
  if (config.labelConfigs && config.labelConfigs.length) {
    config.labelConfigs.forEach((item) => {
      _map[item.labelValue] = item.color;
    });
  }
  _color = config.color || 'rgba(0,0,0,.85)';
  // String(text)为了解决可能存在数值类型的数据需要设置成标签的需求
  // return String(text).split(_configMap['分隔符']).map(item => <Tag color={_map[item]}>{item}</Tag>);
  // let a = 'abc' a.split(undefined); a = ['abc']
  return String(text)
    .split(_configMap['分隔符'])
    .map((item) => (
      <Tag
        style={{
          background: mapTag(_map, item) || _color,
          border: `1px solid ${mapTag(_map, item) || _color}`,
          borderRadius: 2,
          color: mapTag(_map, item)
            ? tagColors[tagBackgroundColors.findIndex((c) => c === mapTag(_map, item))]
            : `rgba(0, 0, 0, .65)`,
        }}
      >
        {item}
      </Tag>
    ));
};
const mapTag = (map, key) => {
  if (map[key]) {
    return map[key];
  } else {
    let _keys = Object.keys(map);
    return _keys.reduce((final, _key) => {
      let isRegExp = _key.includes('RegExp=');
      let reg = new RegExp(_key.replace('RegExp=', ''));
      if (isRegExp && reg.test(key)) {
        final = map[_key];
      }
      return final;
    }, '');
  }
};
export const handleText = (config, text) => {
  return <span style={{ color: config.color || 'rgba(0,0,0,.85)' }}>{text}</span>;
};
export const handleLink = (config, text) => {
  return (
    <span
      className={style.link}
      style={{
        color: config.color || 'rgba(0,0,0,.85)',
      }}
      onClick={() => clickLink(config)}
    >
      {text}
    </span>
  );
};
export const handleWidget = (config, text, record, showComponents, setDetailsConfig) => {
  return (
    <span
      style={{ color: config.color }}
      className={style.link}
      onClick={() => clickWidget(config, text, record, showComponents, setDetailsConfig)}
    >
      {text}
    </span>
  );
};
export const handleModal = (config, text, showModal, setExtra) => {
  return (
    <span
      className={style.link}
      style={{ color: config.color || 'rgba(0,0,0,.85)' }}
      onClick={() => clickModal(config, showModal, setExtra)}
    >
      {text}
    </span>
  );
};
// 日期
export const handleDateString = (config, text) => {
  return text ? moment(text).format('YYYY-MM-DD') : '-';
};
// 时刻
export const handleDateTimeString = (config, text) => {
  return text ? moment(text).format('YYYY-MM-DD HH:mm:ss') : '-';
};
// 处理pageSize
export const handlePageSize = (numStr) => {
  return numStr && isNumber(Number(numStr)) ? Number(numStr) : false;
};
// 处理默认排序
export const handleSortFields = (sortFields) => {
  return (sortFields && sortFields.split(',')) || [];
};