mapServe.tsx 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268
  1. import React, { useState, useEffect } from 'react';
  2. import { FlowchartFormWrapper } from '@antv/xflow';
  3. import { Button, message, Select } from 'antd';
  4. import LuckyExcel from 'luckyexcel';
  5. import {
  6. Position,
  7. Size,
  8. ColorPicker,
  9. InputNumberFiled,
  10. InputFiled,
  11. UploadFiled,
  12. RadioField,
  13. } from '../fields';
  14. import { PREFIX } from '../constants';
  15. import { UnityAction } from '@/utils/utils';
  16. import { connect } from 'dva';
  17. export interface IConfig {
  18. label?: string;
  19. x?: number;
  20. y?: number;
  21. width?: number;
  22. height?: number;
  23. fontSize?: number;
  24. count?: number;
  25. fontFill?: string;
  26. fill?: string;
  27. stroke?: string;
  28. muti_version?: string | number;
  29. is_start_node?: string | number;
  30. bom_template?: string;
  31. version_name?: string;
  32. data?: any;
  33. excel_info?: any;
  34. role_list?:string;
  35. }
  36. const defaultConfig: IConfig = {
  37. muti_version: 1,
  38. is_start_node: 0,
  39. };
  40. const Component = (props: any) => {
  41. const { config, plugin = {}, roleList } = props;
  42. const { updateNode } = plugin;
  43. const [options, setOptions] = useState([])
  44. const [nodeConfig, setNodeConfig] = useState<IConfig>({
  45. ...defaultConfig,
  46. ...config,
  47. });
  48. const onNodeConfigChange = (key: string, value: number | string | object) => {
  49. if (key) {
  50. setNodeConfig({
  51. ...nodeConfig,
  52. [key]: value,
  53. });
  54. updateNode({
  55. [key]: value,
  56. });
  57. } else if (value instanceof Object) {
  58. setNodeConfig({
  59. ...nodeConfig,
  60. ...value,
  61. });
  62. updateNode({
  63. ...value,
  64. });
  65. }
  66. };
  67. const onSave = () => {
  68. UnityAction.emit('NODE_SAVE', nodeConfig);
  69. };
  70. const beforeUpload = (file: any) => {
  71. LuckyExcel.transformExcelToLucky(file, (exportJson, luckysheetfile) => {
  72. if (exportJson.sheets == null || exportJson.sheets.length == 0) {
  73. message.error('读取xlsx文件失败!');
  74. return;
  75. }
  76. console.log(exportJson);
  77. const sheet = exportJson.sheets[0];
  78. let titleCell = [];
  79. sheet.celldata.forEach(item => {
  80. if(item.r == 0) {
  81. // 标题头
  82. titleCell.push(item)
  83. }
  84. // 生成cid
  85. item.v.cid = `${item.r}-${item.c}`
  86. })
  87. let cell = titleCell.map(item => {
  88. let value = '';
  89. if (item.v?.v) {
  90. value = item.v?.v;
  91. } else if (item.v.ct?.s && item.v.ct?.s instanceof Array) {
  92. value = item.v.ct.s.map(item => item?.v).join?.('');
  93. }
  94. return { sheet_name: sheet.name, col_idx: item.r, col_axis: item.c, col_value: value };
  95. });
  96. onNodeConfigChange(null, {
  97. data: [sheet],
  98. excel_info: {
  99. file_name: file.name,
  100. excel_cols: cell,
  101. },
  102. });
  103. });
  104. };
  105. useEffect(() => {
  106. setNodeConfig({
  107. ...defaultConfig,
  108. ...config,
  109. });
  110. }, [config]);
  111. // console.log(nodeConfig, config)
  112. useEffect(() => {
  113. if(!roleList || roleList.length <= 0) return;
  114. let op = []
  115. console.log(roleList)
  116. roleList.filter(cur=>cur.RoleType == 4).forEach(item => {
  117. op.push({label:`${item.Name}(${item.ID})`, value:item.ID})
  118. })
  119. setOptions(op);
  120. console.log(op)
  121. },[roleList])
  122. return (
  123. <div className={`${PREFIX}-panel-body`}>
  124. <div className={`${PREFIX}-panel-group`}>
  125. <h5>内容</h5>
  126. <InputFiled
  127. label="标题"
  128. value={nodeConfig.label}
  129. onChange={value => {
  130. onNodeConfigChange('label', value);
  131. }}
  132. />
  133. </div>
  134. <div className={`${PREFIX}-panel-group`}>
  135. <h5>数据</h5>
  136. <RadioField
  137. label="多个版本"
  138. value={nodeConfig.muti_version}
  139. onChange={value => {
  140. onNodeConfigChange('muti_version', value);
  141. }}
  142. options={[
  143. { label: '是', value: 1 },
  144. { label: '否', value: 0 },
  145. ]}
  146. />
  147. <RadioField
  148. label="起始起点"
  149. value={nodeConfig.is_start_node}
  150. onChange={value => {
  151. onNodeConfigChange('is_start_node', value);
  152. }}
  153. options={[
  154. { label: '是', value: 1 },
  155. { label: '否', value: 0 },
  156. ]}
  157. />
  158. {nodeConfig.is_start_node == 1 && (
  159. <>
  160. <InputFiled
  161. label="模板名称"
  162. value={nodeConfig.version_name}
  163. onChange={value => {
  164. onNodeConfigChange('version_name', value);
  165. }}
  166. />
  167. <UploadFiled
  168. label="模板"
  169. onChange={url => onNodeConfigChange('bom_template', url)}
  170. beforeUpload={beforeUpload}
  171. />
  172. <div>{nodeConfig.excel_info?.file_name}</div>
  173. </>
  174. )}
  175. <div className='group'>
  176. <label>权限</label>
  177. <Select
  178. value= {nodeConfig.role_list ? nodeConfig.role_list.split(",").map(item=>Number(item)) : []}
  179. mode="multiple"
  180. allowClear
  181. style={{ width: '100%' }}
  182. placeholder="选择权限"
  183. onChange={(v: number[]) => {
  184. onNodeConfigChange('role_list', v.join(','))
  185. }}
  186. options={options}
  187. />
  188. </div>
  189. </div>
  190. <div className={`${PREFIX}-panel-group`}>
  191. <h5>样式</h5>
  192. <Position
  193. x={nodeConfig.x}
  194. y={nodeConfig.y}
  195. onChange={(key, value) => {
  196. onNodeConfigChange(key, value);
  197. }}
  198. />
  199. <Size
  200. width={nodeConfig.width}
  201. height={nodeConfig.height}
  202. onChange={(key, value) => {
  203. onNodeConfigChange(key, value);
  204. }}
  205. />
  206. <ColorPicker
  207. label="填充"
  208. value={nodeConfig.fill}
  209. onChange={(value: string) => {
  210. onNodeConfigChange('fill', value);
  211. }}
  212. />
  213. <ColorPicker
  214. label="边框"
  215. value={nodeConfig.stroke}
  216. onChange={(value: string) => {
  217. onNodeConfigChange('stroke', value);
  218. }}
  219. />
  220. <InputNumberFiled
  221. label="消息数量"
  222. value={nodeConfig.count}
  223. onChange={value => {
  224. onNodeConfigChange('count', value);
  225. }}
  226. />
  227. <div style={{ display: 'flex' }}>
  228. <InputNumberFiled
  229. label="字号"
  230. value={nodeConfig.fontSize}
  231. width={68}
  232. onChange={value => {
  233. onNodeConfigChange('fontSize', value);
  234. }}
  235. style={{ marginRight: 10 }}
  236. />
  237. <ColorPicker
  238. value={nodeConfig.fontFill}
  239. onChange={(value: string) => {
  240. onNodeConfigChange('fontFill', value);
  241. }}
  242. />
  243. </div>
  244. </div>
  245. <Button type="primary" onClick={onSave}>
  246. 保存
  247. </Button>
  248. </div>
  249. );
  250. };
  251. function RecthServe(props: any) {
  252. return (
  253. <FlowchartFormWrapper {...props}>
  254. {(config, plugin) => <Component {...props} plugin={plugin} config={config} />}
  255. </FlowchartFormWrapper>
  256. );
  257. }
  258. export default connect(({ flow }) => ({ roleList: flow.roleList }))(RecthServe);