From aa53227bc006816a30258c6390084aa74defb4d1 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期一, 27 十一月 2023 18:05:55 +0800 Subject: [PATCH] 2023-11-27 --- src/menu/components/chart/antv-bar/chartcompile/index.jsx | 528 ++++++++---------------------- src/menu/components/chart/antv-bar/chartcompile/formconfig.jsx | 338 ++++++++++--------- src/menu/components/table/edit-table/options.jsx | 22 + src/tabviews/custom/components/chart/antv-bar-line/index.jsx | 17 src/components/normalform/modalform/index.jsx | 20 src/menu/components/chart/antv-bar/chartcompile/index.scss | 5 src/components/normalform/modalform/mkRadio/index.jsx | 24 + src/components/normalform/modalform/mkSelect/index.jsx | 4 src/tabviews/custom/components/table/edit-table/normalTable/index.jsx | 15 9 files changed, 390 insertions(+), 583 deletions(-) diff --git a/src/components/normalform/modalform/index.jsx b/src/components/normalform/modalform/index.jsx index 2b9b80c..33b243c 100644 --- a/src/components/normalform/modalform/index.jsx +++ b/src/components/normalform/modalform/index.jsx @@ -7,6 +7,7 @@ import asyncComponent from '@/utils/asyncComponent' import MKEInput from './mkInput' import MKNumberInput from './mkNumberInput' +import MKEmitter from '@/utils/events.js' import MKSelect from './mkSelect' import './index.scss' @@ -23,8 +24,9 @@ class ModalForm extends Component { static propTpyes = { - formlist: PropTypes.array, // 琛ㄥ崟鍒楄〃 - inputSubmit: PropTypes.func // input鍥炶溅鎻愪氦 + formlist: PropTypes.array, + inputSubmit: PropTypes.func, + transVals: PropTypes.func, } state = { @@ -108,7 +110,7 @@ let supItem = fieldMap.get(key) let supval = supItem.initval - if (supItem.initval && supItem.type !== 'checkbox' && JSON.stringify(supItem.initval) === '[]') { + if (supItem.initval && supItem.type !== 'checkbox' && supItem.type !== 'multiselect' && JSON.stringify(supItem.initval) === '[]') { supval = '' } @@ -124,7 +126,7 @@ } else if (supItem.hidden) { cell.hidden = true - } else if (supItem.type === 'checkbox') { + } else if (supItem.type === 'checkbox' || supItem.type === 'multiselect') { let vals = [...supval, ...item.values] if (vals.length === new Set(vals).size) { cell.hidden = true @@ -179,6 +181,10 @@ this.record = {...this.record, ...values} if (!item) return + + if (item.$trans) { + this.props.transVals && this.props.transVals(values, item.field) + } if (item.controlFields) { let map = new Map() @@ -190,7 +196,7 @@ let reset = (current) => { let val = this.record[current.field] - if (val && current.type !== 'checkbox' && JSON.stringify(val) === '[]') { + if (val && current.type !== 'checkbox' && current.type !== 'multiselect' && JSON.stringify(val) === '[]') { val = '' } @@ -199,7 +205,7 @@ if (current.hidden) { m.hidden = true - } else if (current.type === 'checkbox') { + } else if (current.type === 'checkbox' || current.type === 'multiselect') { let vals = [...val, ...cell.values] if (vals.length !== new Set(vals).size) { m.hidden = false @@ -248,7 +254,7 @@ map.set(cell.field, cell) }) - item.callback(map, this.record) + item.callback(map, this.record, MKEmitter) this.setState({ formlist: this.state.formlist.map(cell => { diff --git a/src/components/normalform/modalform/mkRadio/index.jsx b/src/components/normalform/modalform/mkRadio/index.jsx index 088ed0e..587fef6 100644 --- a/src/components/normalform/modalform/mkRadio/index.jsx +++ b/src/components/normalform/modalform/mkRadio/index.jsx @@ -19,10 +19,22 @@ componentDidMount () { MKEmitter.addListener('mkFP', this.mkFormHandle) + MKEmitter.addListener('mkFC', this.mkFormControl) } shouldComponentUpdate (nextProps, nextState) { return !is(fromJS(this.state), fromJS(nextState)) + } + + UNSAFE_componentWillReceiveProps (nextProps) { + const { config } = this.state + + if (!is(fromJS(config.oriOptions), fromJS(nextProps.config.oriOptions))) { + this.setState({ + config: fromJS(nextProps.config).toJS(), + options: fromJS(nextProps.config.options).toJS() + }) + } } componentWillUnmount () { @@ -30,6 +42,16 @@ return } MKEmitter.removeListener('mkFP', this.mkFormHandle) + MKEmitter.removeListener('mkFC', this.mkFormControl) + } + + mkFormControl = (type, field, value) => { + if (field !== this.props.config.field) return + + if (type === 'input') { + this.setState({value}) + this.props.onChange(value, {}) + } } mkFormHandle = (field, parentId) => { @@ -45,7 +67,7 @@ value: val }) - this.props.onChange(val) + this.props.onChange(val, {}) config.linkFields && config.linkFields.forEach((m, i) => { setTimeout(() => { diff --git a/src/components/normalform/modalform/mkSelect/index.jsx b/src/components/normalform/modalform/mkSelect/index.jsx index 840dd4a..a1b4479 100644 --- a/src/components/normalform/modalform/mkSelect/index.jsx +++ b/src/components/normalform/modalform/mkSelect/index.jsx @@ -159,8 +159,8 @@ filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0} onChange={this.mutilselectChange} > - {options.map(option => - <Select.Option key={option.value} disabled={option.disabled} value={option.value}>{option.label || option.text}</Select.Option> + {options.map((option, i) => + <Select.Option key={i} disabled={option.disabled} value={option.value || option.field}>{option.label || option.text}</Select.Option> )} </Select>) } diff --git a/src/menu/components/chart/antv-bar/chartcompile/formconfig.jsx b/src/menu/components/chart/antv-bar/chartcompile/formconfig.jsx index c98849c..e5e7e1f 100644 --- a/src/menu/components/chart/antv-bar/chartcompile/formconfig.jsx +++ b/src/menu/components/chart/antv-bar/chartcompile/formconfig.jsx @@ -46,24 +46,24 @@ return [ { type: 'text', - key: 'title', + field: 'title', label: '鏍囬', - initVal: card.title, + initval: card.title, required: false }, { type: 'text', - key: 'name', + field: 'name', label: '缁勪欢鍚嶇О', - initVal: card.name, + initval: card.name, tooltip: '鐢ㄤ簬缁勪欢闂寸殑鍖哄垎銆�', required: true }, { type: 'number', - key: 'width', + field: 'width', label: '瀹藉害', - initVal: card.width, + initval: card.width, tooltip: '鏍呮牸甯冨眬锛屾瘡琛岀瓑鍒嗕负24鍒椼��', min: 1, max: 24, @@ -72,52 +72,51 @@ }, { type: 'styleInput', - key: 'height', + field: 'height', label: '鍥捐〃楂樺害', - initVal: card.height, + initval: card.height, tooltip: '鍥捐〃缁樺浘鍖哄煙鐨勯珮搴︼紝涓嶅寘鎷爣棰樺強鍐呭杈硅窛銆�', required: true, options: ['px', 'vh', 'vw'] }, { type: 'radio', - key: 'permission', + field: 'permission', label: '鏉冮檺楠岃瘉', - initVal: card.permission || 'false', + initval: card.permission || 'false', required: false, options: [ - {value: 'true', text: '鍚敤'}, - {value: 'false', text: '绂佺敤'}, + {value: 'true', label: '鍚敤'}, + {value: 'false', label: '绂佺敤'}, ], forbid: !appType || ispop || isprint }, { type: 'radio', - key: 'cacheLocal', + field: 'cacheLocal', label: '鏈湴缂撳瓨', - initVal: card.cacheLocal || 'true', + initval: card.cacheLocal || 'true', required: false, options: [ - {value: 'true', text: '缁ф壙鑿滃崟'}, - {value: 'false', text: '绂佺敤'}, + {value: 'true', label: '缁ф壙鑿滃崟'}, + {value: 'false', label: '绂佺敤'}, ], forbid: ispop || isprint }, { - type: 'select', - key: 'blacklist', + type: 'multiselect', + field: 'blacklist', label: '榛戝悕鍗�', - initVal: card.blacklist || [], - multi: true, + initval: card.blacklist || [], required: false, options: roleList, forbid: !!appType || isprint }, { type: 'radio', - key: 'click', + field: 'click', label: '鐐瑰嚮浜嬩欢', - initVal: card.click || '', + initval: card.click || '', tooltip: '鐐瑰嚮鏌卞瓙鏃惰Е鍙戠殑浜嬩欢锛屽惎鐢ㄨ嚜瀹氫箟璁剧疆鏃舵棤鏁堛��', required: false, forbid: appType === 'mob' || card.chartType !== 'bar', @@ -125,13 +124,20 @@ {value: '', label: '鏁版嵁鍒囨崲'}, {value: 'menu', label: '鑿滃崟'}, {value: 'menus', label: '鑿滃崟缁�'} + ], + controlFields: [ + {field: 'menu', values: ['menu']}, + {field: 'open', values: ['menu', 'menus']}, + {field: 'joint', values: ['menu', 'menus']}, + {field: 'menuType', values: ['menus']}, + {field: 'menus', values: ['menus']}, ] }, { type: appType === '' ? 'cascader' : 'select', - key: 'menu', + field: 'menu', label: '鍏宠仈鑿滃崟', - initVal: card.menu || (appType === '' ? [] : ''), + initval: card.menu || (appType === '' ? [] : ''), tooltip: '鍦ㄤ娇鐢ㄦ煴褰㈠浘涓旀湭鍚敤鑷畾涔夎缃椂鏈夋晥銆�', required: true, forbid: appType === 'mob' || card.chartType !== 'bar', @@ -140,9 +146,9 @@ }, { type: 'select', - key: 'menuType', + field: 'menuType', label: '鑿滃崟绫诲瀷', - initVal: card.menuType || '', + initval: card.menuType || '', required: true, forbid: appType === 'mob' || card.chartType !== 'bar', hidden: card.click !== 'menus', @@ -150,9 +156,9 @@ }, { type: 'radio', - key: 'open', + field: 'open', label: '鎵撳紑鏂瑰紡', - initVal: card.open || 'blank', + initval: card.open || 'blank', required: false, options: [ {value: 'blank', label: '鏂扮獥鍙�'}, @@ -163,9 +169,9 @@ }, { type: 'radio', - key: 'joint', + field: 'joint', label: '鍙傛暟鎷兼帴', - initVal: card.joint || 'true', + initval: card.joint || 'true', required: false, options: [ {value: 'true', label: '鏄�'}, @@ -176,9 +182,9 @@ }, { type: 'table', - key: 'menus', + field: 'menus', label: '鑿滃崟缁�', - initVal: card.menus || [], + initval: card.menus || [], required: true, span: 24, actions: ['view'], @@ -246,68 +252,70 @@ let labelOptions = [{ value: 'false', - text: '闅愯棌' + label: '闅愯棌' }, { value: 'true', - text: '鏄剧ず' + label: '鏄剧ず' }] if (card.chartType === 'bar') { - labelOptions[1].text = '澶栭儴' + labelOptions[1].label = '澶栭儴' labelOptions.push(...[{ value: 'top', - text: '椤堕儴' + label: '椤堕儴' }, { value: 'middle', - text: '涓棿' + label: '涓棿' }, { value: 'bottom', - text: '搴曢儴' + label: '搴曢儴' }]) } - - let _label = card.label || 'false' return [ { type: 'radio', - key: 'datatype', + field: 'datatype', label: '鏁版嵁绫诲瀷', - initVal: card.datatype || 'query', + initval: card.datatype || 'query', tooltip: '缁熻鍥捐〃閫傜敤浜庡睍绀烘暟鎹被鍨嬩负鍔ㄦ�佸�笺��', required: false, + $trans: true, options: [ - { value: 'query', text: '鏌ヨ' }, - { value: 'statistics', text: '缁熻' } + { value: 'query', label: '鏌ヨ' }, + { value: 'statistics', label: '缁熻' } + ], + controlFields: [ + {field: 'InfoType', values: ['statistics']}, + {field: 'InfoValue', values: ['statistics']}, + {field: 'Yaxis', values: ['query']}, ] }, { type: 'select', - key: 'Xaxis', + field: 'Xaxis', label: 'X-杞�', - initVal: card.Xaxis || '', + initval: card.Xaxis || '', required: true, options: xfields }, { type: 'select', - key: 'InfoType', + field: 'InfoType', label: '绫诲瀷', - initVal: card.InfoType || '', - hidden: card.datatype !== 'statistics', + initval: card.InfoType || '', required: true, options: xfields }, { type: 'select', - key: 'InfoValue', + field: 'InfoValue', label: '鍊�', - initVal: card.InfoValue || '', - hidden: card.datatype !== 'statistics', + initval: card.InfoValue || '', required: true, options: yfields }, { type: 'select', - key: 'legend', + field: 'legend', label: '鍥句緥浣嶇疆', - initVal: card.legend || 'bottom', + initval: card.legend || 'bottom', required: false, options: [ { field: 'bottom', label: '涓�' }, @@ -325,313 +333,301 @@ { field: 'hidden', label: '闅愯棌' } ] }, { - type: 'select', - key: 'Yaxis', + type: 'multiselect', + field: 'Yaxis', label: 'Y-杞�', - initVal: card.Yaxis || [], - multi: true, // 澶氶�� - hidden: card.datatype === 'statistics', + initval: card.Yaxis || [], required: true, options: yfields }, { type: 'select', - key: 'shape', + field: 'shape', label: '褰㈢姸', - initVal: card.shape || (shapes[0] && shapes[0].field), + initval: card.shape || (shapes[0] && shapes[0].field), required: false, options: shapes }, { type: 'radio', - key: 'tooltip', + field: 'tooltip', label: '鎮诞鎻愮ず', - initVal: card.tooltip || 'true', + initval: card.tooltip || 'true', required: false, options: [{ value: 'true', - text: '鏄剧ず' + label: '鏄剧ず' }, { value: 'false', - text: '闅愯棌' + label: '闅愯棌' }] }, { type: 'radio', - key: 'point', + field: 'point', label: '鐐瑰浘', - initVal: card.point || 'false', + initval: card.point || 'false', required: false, forbid: !['line'].includes(card.chartType), options: [{ value: 'true', - text: '鏄剧ず' + label: '鏄剧ず' }, { value: 'false', - text: '闅愯棌' + label: '闅愯棌' }] }, { type: 'radio', - key: 'transpose', + field: 'transpose', label: '鍙樻崲', - initVal: card.transpose || 'false', + initval: card.transpose || 'false', tooltip: '妯旱鍧愭爣杞翠氦鎹�', required: false, options: [{ value: 'true', - text: '鏄�' + label: '鏄�' }, { value: 'false', - text: '鍚�' + label: '鍚�' }] }, { type: 'radio', - key: 'show', + field: 'show', label: '鏄剧ず', - initVal: card.show || 'value', + initval: card.show || 'value', tooltip: '褰撲娇鐢ㄨ嚜瀹氫箟璁剧疆鏃讹紝鍙湪鏄剧ず锛堝��/%锛夊鍗曠嫭璁剧疆鏄剧ず绫诲瀷銆傛敞锛氳嚜瀹氫箟涓虹┖鏃朵娇鐢ㄦ澶勮缃��', required: false, options: [{ value: 'value', - text: '鏁板��' + label: '鏁板��' }, { value: 'percent', - text: '鐧惧垎姣�' + label: '鐧惧垎姣�' }, { value: 'thdSeparator', - text: '鍗冨垎浣�' + label: '鍗冨垎浣�' }] }, { - type: labelOptions.length > 20 ? 'select' : 'radio', - key: 'label', + type: 'radio', + field: 'label', label: '鏍囨敞', - initVal: _label, + initval: card.label || 'false', tooltip: '鍥惧舰鑺傜偣澶勭殑鏁板�笺��', required: false, - options: labelOptions + options: labelOptions, + controlFields: [ + {field: 'labelColor', values: ['true']} + ] }, { type: 'radio', - key: 'labelColor', + field: 'labelColor', label: '鏍囨敞棰滆壊', - initVal: card.labelColor || 'system', + initval: card.labelColor || 'system', tooltip: '浣跨敤绯荤粺鑹叉椂锛屼娇鐢ㄨ壊绯婚�夐」璁剧疆鐨勭郴缁熼鑹诧紝浣跨敤鑷畾涔変负棰滆壊璁剧疆涓畾涔夌殑鍥惧舰棰滆壊銆�', required: false, - hidden: _label !== 'true', options: [{ value: 'system', - text: '绯荤粺' + label: '绯荤粺' }, { value: 'custom', - text: '鑷畾涔�' + label: '鑷畾涔�' }] + // }, { + // type: 'radio', + // field: 'labelValue', + // label: '鏍囨敞鍊�', + // initval: card.labelValue || 'default', + // tooltip: '鏍囨敞鍊肩殑鏄剧ず瑙勫垯銆�', + // required: false, + // options: [{ + // value: 'default', + // label: '榛樿' + // }, { + // value: 'zero', + // label: '闅愯棌 0 鍊�' + // }], }, { type: 'radio', - key: 'labelValue', - label: '鏍囨敞鍊�', - initVal: card.labelValue || 'default', - tooltip: '鏍囨敞鍊肩殑鏄剧ず瑙勫垯銆�', - required: false, - hidden: _label === 'false', - options: [{ - value: 'default', - text: '榛樿' - }, { - value: 'zero', - text: '闅愯棌 0 鍊�' - }], - }, { - type: 'radio', - key: 'adjust', + field: 'adjust', label: '澶氭煴鎺掑垪', - initVal: card.adjust || 'dodge', + initval: card.adjust || 'dodge', required: false, forbid: !['bar'].includes(card.chartType), options: [{ value: 'dodge', - text: '鍒嗙粍' + label: '鍒嗙粍' }, { value: 'stack', - text: '鍫嗗彔' + label: '鍫嗗彔' }] }, { type: 'radio', - key: 'area', + field: 'area', label: '闈㈢Н鍥�', - initVal: card.area || 'false', - // tooltip: '浠呭湪褰㈢姸涓簊mooth鏃舵湁鏁堛��', + initval: card.area || 'false', required: false, forbid: ['bar'].includes(card.chartType), options: [{ value: 'true', - text: '鏄剧ず' + label: '鏄剧ず' }, { value: 'false', - text: '涓嶆樉绀�' + label: '涓嶆樉绀�' }] }, { type: 'radio', - key: 'repeat', + field: 'repeat', label: '閲嶅鏁版嵁', - initVal: card.repeat || 'unrepeat', + initval: card.repeat || 'unrepeat', required: false, options: [{ value: 'unrepeat', - text: '鍘婚噸' + label: '鍘婚噸' }, { value: 'average', - text: '骞冲潎' + label: '骞冲潎' }, { value: 'cumsum', - text: '绱姞' + label: '绱姞' }] }, { type: 'radio', - key: 'coordinate', + field: 'coordinate', label: '鍧愭爣', - initVal: card.coordinate || 'angle', + initval: card.coordinate || 'angle', required: false, options: [{ value: 'angle', - text: '浜岀淮鍧愭爣' + label: '浜岀淮鍧愭爣' }, { value: 'polar', - text: '鏋佸潗鏍�' + label: '鏋佸潗鏍�' }] }, { type: 'radio', - key: 'grid', + field: 'grid', label: '缃戞牸绾�', - initVal: card.grid || 'show', + initval: card.grid || 'show', required: false, options: [{ value: 'show', - text: '鏄剧ず' + label: '鏄剧ず' }, { value: 'hidden', - text: '闅愯棌' + label: '闅愯棌' }] }, { type: 'radio', - key: 'y_line', + field: 'y_line', label: 'y杞磋竟绾�', - initVal: card.y_line || 'hidden', + initval: card.y_line || 'hidden', tooltip: '鍥惧舰宸︿晶鎴栧彸渚х殑杈圭嚎銆�', required: false, options: [{ value: 'show', - text: '鏄剧ず' + label: '鏄剧ず' }, { value: 'hidden', - text: '闅愯棌' + label: '闅愯棌' }] }, { type: 'radio', - key: 'download', + field: 'download', label: '瀵煎嚭鍥剧墖', - initVal: card.download || 'forbid', + initval: card.download || 'forbid', required: false, forbid: appType === 'mob', options: [{ value: 'forbid', - text: '绂佺敤' + label: '绂佺敤' }, { value: 'enable', - text: '鍚敤' + label: '鍚敤' }] }, { type: 'radio', - key: 'empty', + field: 'empty', label: '绌哄�奸殣钘�', - initVal: card.empty || 'show', + initval: card.empty || 'show', tooltip: '褰撴煡璇㈡暟鎹负绌烘椂锛岄殣钘忚缁勪欢銆�', required: false, options: [ - {value: 'show', text: '鍚�'}, - {value: 'hidden', text: '鏄�'}, + {value: 'show', label: '鍚�'}, + {value: 'hidden', label: '鏄�'}, ], }, { type: 'number', - key: 'barSize', + field: 'barSize', label: '鏌卞舰瀹藉害', tooltip: '绌哄�兼椂锛屽搴﹁嚜閫傚簲銆�', min: 5, max: 100, decimal: 0, - initVal: card.barSize, + initval: card.barSize, forbid: !['bar'].includes(card.chartType), required: false }, { type: 'number', - key: 'barRadius', + field: 'barRadius', label: '鏌卞舰鍦嗚', tooltip: '鏌卞舰鍥句笂绔渾瑙掋��', min: 0, max: 200, decimal: 0, - initVal: card.barRadius || 0, + initval: card.barRadius || 0, forbid: !['bar'].includes(card.chartType), required: false }, { type: 'number', - key: 'min', + field: 'min', label: '鏈�灏忓��', tooltip: 'y杞存渶灏忓�硷紝涓虹┖鏃惰嚜閫傚簲銆�', - initVal: card.min, + initval: card.min, required: false }, { type: 'number', - key: 'max', + field: 'max', label: '鏈�澶у��', tooltip: 'y杞存渶澶у�硷紝涓虹┖鏃惰嚜閫傚簲銆�', - initVal: card.max, + initval: card.max, required: false }, { type: 'number', - key: 'XLimit', + field: 'XLimit', min: 2, label: '瀛楃闄愬埗', tooltip: 'X杞存渶澶у瓧绗﹂檺鍒躲��', - initVal: card.XLimit || 11, + initval: card.XLimit || 11, forbid: appType === 'mob', required: false }, { type: 'color', - key: 'color', + field: 'color', label: '鑹茬郴', - initVal: card.color || 'rgba(0, 0, 0, 0.65)', + initval: card.color || 'rgba(0, 0, 0, 0.65)', tooltip: '鍧愭爣杞存彁绀烘枃瀛楀強绀轰緥鐨勯鑹层��', required: false }, { type: 'color', - key: 'lineColor', + field: 'lineColor', label: '杞寸嚎棰滆壊', - initVal: card.lineColor, + initval: card.lineColor, tooltip: '鍧愭爣杞寸嚎鐨勯鑹诧紝鍖呮嫭x杞淬�亂杞村強缃戞牸绾裤��', allowClear: true, required: false }, { - type: 'color', - key: 'selectColor', - label: '閫変腑棰滆壊', - initVal: card.selectColor || '', - tooltip: '閫変腑鏌卞舰鍥剧殑棰滆壊锛屽湪浜や簰鏁堟灉銆婂厓绱犻�変腑锛堝閫夛級銆嬪拰銆婂厓绱犻�変腑锛堝崟閫夛級銆嬩腑鏈夋晥锛屽惎鐢ㄨ嚜瀹氫箟璁剧疆鏃舵棤鏁堛��', - forbid: !['bar'].includes(card.chartType), - allowClear: true, - required: false - }, { type: 'number', - key: 'rotate', + field: 'rotate', label: '鏃嬭浆', tooltip: '鍧愭爣杞存爣娉ㄦ枃鏈殑鏃嬭浆瑙掑害銆�', min: 0, max: 360, decimal: 0, - initVal: card.rotate, + initval: card.rotate, forbid: appType !== 'mob', required: false }, { - type: 'select', - key: 'interaction', + type: 'multiselect', + field: 'interaction', label: '浜や簰鏁堟灉', - initVal: card.interaction || [], - multi: true, + initval: card.interaction || [], required: false, forbid: appType === 'mob', options: [ @@ -647,7 +643,19 @@ { value: 'legend-active', label: '鍥句緥鑱氱劍' }, { value: 'legend-highlight', label: '鍥句緥楂樹寒' }, { value: 'brush', label: '閫夋杩囨护' }, + ], + controlFields: [ + {field: 'selectColor', values: ['element-selected', 'element-single-selected']}, ] + }, { + type: 'color', + field: 'selectColor', + label: '閫変腑棰滆壊', + initval: card.selectColor || '', + tooltip: '閫変腑鏌卞舰鍥剧殑棰滆壊锛屽惎鐢ㄨ嚜瀹氫箟璁剧疆鏃舵棤鏁堛��', + forbid: !['bar'].includes(card.chartType), + allowClear: true, + required: false } ] } diff --git a/src/menu/components/chart/antv-bar/chartcompile/index.jsx b/src/menu/components/chart/antv-bar/chartcompile/index.jsx index f7a2dd7..e0536d6 100644 --- a/src/menu/components/chart/antv-bar/chartcompile/index.jsx +++ b/src/menu/components/chart/antv-bar/chartcompile/index.jsx @@ -1,19 +1,18 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { fromJS } from 'immutable' -import { Modal, Form, Row, Col, Select, Radio, notification, Tooltip, Input, InputNumber, Tabs, Button } from 'antd' -import { QuestionCircleOutlined, EditOutlined, PlusOutlined } from '@ant-design/icons' +import { Modal, Form, Col, Radio, notification, Tabs, Button } from 'antd' +import { EditOutlined, PlusOutlined } from '@ant-design/icons' import Utils from '@/utils/utils.js' import { chartColors } from '@/utils/option.js' import { getBaseForm, getOptionForm } from './formconfig' import asyncComponent from '@/utils/asyncComponent' -import ColorSketch from '@/mob/colorsketch' import './index.scss' const { TabPane } = Tabs const EditTable = asyncComponent(() => import('@/templates/zshare/editTable')) -const NormalForm = asyncComponent(() => import('@/menu/components/share/normalform')) +const ModalForm = asyncComponent(() => import('@/components/normalform/modalform')) class LineChartDrawerForm extends Component { static propTpyes = { @@ -24,7 +23,6 @@ state = { view: 'base', - ramp: 'false', visible: false, datatype: '', plot: null, @@ -186,7 +184,6 @@ this.setState({ visible: true, view: 'base', - ramp: plot.ramp || 'false', datatype: plot.datatype || 'query', fieldName: fieldName, plot: plot, @@ -194,179 +191,6 @@ formlist: getOptionForm(plot, config.columns), cusColumns: this.getCusColumns(plot.zoomYaxis) }) - } - - radioChange = (e, key) => { - const { formlist } = this.state - let val = e.target.value - - if (key === 'datatype') { - this.setState({ - datatype: val, - formlist: fromJS(formlist).toJS().map(item => { - if (['Yaxis'].includes(item.key)) { - item.hidden = val === 'statistics' - } else if (['InfoType', 'InfoValue'].includes(item.key)) { - item.hidden = val !== 'statistics' - } - return item - }) - }) - } else if (key === 'label') { - this.setState({formlist: fromJS(formlist).toJS().map(cell => { - if (!['labelColor', 'labelValue'].includes(cell.key)) return cell - - if (cell.key === 'labelColor') { - if (val !== 'true') { - cell.hidden = true - } else { - cell.hidden = false - } - } else { - if (val === 'false') { - cell.hidden = true - } else { - cell.hidden = false - } - } - - return cell - })}) - } - } - - getFields() { - const { formlist } = this.state - const { getFieldDecorator } = this.props.form - const fields = [] - - if (!formlist) { - return fields - } - - formlist.forEach((item, index) => { - if (item.hidden || item.forbid) return - - if (item.type === 'text') { - fields.push( - <Col span={12} key={index}> - <Form.Item label={item.tooltip ? - <Tooltip placement="topLeft" title={item.tooltip}> - <QuestionCircleOutlined className="mk-form-tip" /> - {item.label} - </Tooltip> : item.label - }> - {getFieldDecorator(item.key, { - initialValue: item.initVal, - rules: [ - { - required: !!item.required, - message: '璇疯緭鍏�' + item.label + '!' - } - ] - })(<Input placeholder="" autoComplete="off" disabled={item.readonly} onPressEnter={this.onSubmit}/>)} - </Form.Item> - </Col> - ) - } else if (item.type === 'number') { - fields.push( - <Col span={12} key={index}> - <Form.Item label={item.tooltip ? - <Tooltip placement="topLeft" title={item.tooltip}> - <QuestionCircleOutlined className="mk-form-tip" /> - {item.label} - </Tooltip> : item.label - }> - {getFieldDecorator(item.key, { - initialValue: item.initVal, - rules: [ - { - required: !!item.required, - message: '璇疯緭鍏�' + item.label + '!' - } - ] - })(<InputNumber min={item.min} max={item.max} precision={item.decimal} onPressEnter={this.onSubmit}/>)} - </Form.Item> - </Col> - ) - } else if (item.type === 'select') { // 涓嬫媺 - fields.push( - <Col span={12} key={index}> - <Form.Item label={item.tooltip ? - <Tooltip placement="topLeft" title={item.tooltip}> - <QuestionCircleOutlined className="mk-form-tip" /> - {item.label} - </Tooltip> : item.label - }> - {getFieldDecorator(item.key, { - initialValue: item.initVal, - rules: [ - { - required: !!item.required, - message: '璇烽�夋嫨' + item.label + '!' - } - ] - })( - <Select mode={item.multi ? 'multiple' : ''}> - {item.options.map((option, index) => - <Select.Option key={index} value={option.field || option.value}> - {option.label || option.text} - </Select.Option> - )} - </Select> - )} - </Form.Item> - </Col> - ) - } else if (item.type === 'radio') { - fields.push( - <Col span={12} key={index}> - <Form.Item label={item.tooltip ? - <Tooltip placement="topLeft" title={item.tooltip}> - <QuestionCircleOutlined className="mk-form-tip" /> - {item.label} - </Tooltip> : item.label - }> - {getFieldDecorator(item.key, { - initialValue: item.initVal, - rules: [ - { - required: !!item.required, - message: '璇烽�夋嫨' + item.label + '!' - } - ] - })( - <Radio.Group style={{whiteSpace: 'nowrap'}} disabled={item.readonly} onChange={(e) => this.radioChange(e, item.key)}> - {item.options.map(option => { - return ( - <Radio key={option.value} value={option.value}>{option.text}</Radio> - ) - })} - </Radio.Group> - )} - </Form.Item> - </Col> - ) - } else if (item.type === 'color') { - fields.push( - <Col span={12} key={index}> - <Form.Item label={item.tooltip ? - <Tooltip placement="topLeft" title={item.tooltip}> - <QuestionCircleOutlined className="mk-form-tip" /> - {item.label} - </Tooltip> : item.label - }> - {getFieldDecorator(item.key, { - initialValue: item.initVal - })( - <ColorSketch allowClear={item.allowClear} /> - )} - </Form.Item> - </Col> - ) - } - }) - return fields } enabledChange = (e) => { @@ -542,7 +366,7 @@ }) } - this.setState({plot: {...plot, colors, ramp: val}, ramp: val}) + this.setState({plot: {...plot, colors, ramp: val}}) } rampDirectionChange = (e) => { @@ -557,112 +381,26 @@ const { plot, view } = this.state if (view === 'normal') { - this.props.form.validateFieldsAndScroll((err, values) => { - if (!err) { - let _plot = {...plot, ...values} + this.normalRef.handleConfirm().then(values => { + let _plot = {...plot, ...values} - if (_plot.datatype !== plot.datatype) { - _plot.colors = null - } - if (_plot.datatype === 'statistics') { - _plot.enabled = 'false' - _plot.customs = [] - delete _plot.Yaxis - } else if (_plot.Yaxis) { - let yaxis = JSON.parse(JSON.stringify(_plot.Yaxis)) - let caxis = _plot.customs ? _plot.customs.map(m => m.type) : [] - yaxis.sort() - caxis.sort() - - if (JSON.stringify(yaxis) !== JSON.stringify(caxis)) { - let labels = {} - config.columns.forEach(col => { - labels[col.field] = col.label - }) - - let cus = {} - _plot.customs && _plot.customs.forEach(m => { - cus[m.type] = m - }) - _plot.customs = _plot.Yaxis.map((item, i) => { - if (cus[item]) return cus[item] - - return { - uuid: Utils.getuuid(), - type: item, - name: labels[item] || item, - axis: i === 0 ? 'true' : 'false', - label: 'false', - title: 'true', - shape: _plot.chartType === 'bar' && i === 0 ? ['bar', 'rect'] : ['line', 'smooth'] - } - }) - - let cusColor = {} - let limit = chartColors.length - - _plot.colors && _plot.colors.forEach(m => { - cusColor[m.type] = m - }) - _plot.colors = _plot.Yaxis.map((item, i) => { - if (cusColor[item]) return cusColor[item] - - return { - uuid: Utils.getuuid(), - type: item, - label: labels[item] || item, - color: chartColors[i % limit], - color1: chartColors[i % limit] - } - }) - } - } - - this.setState({ - plot: _plot, - visible: false - }) - - this.props.plotchange({...config, plot: _plot}) + if (_plot.datatype !== plot.datatype) { + _plot.colors = null } + this.resetPlot(_plot) + + this.setState({ + plot: _plot, + visible: false + }) + + this.props.plotchange({...config, plot: _plot}) }) } else if (view === 'base') { this.baseRef.handleConfirm().then(res => { let _plot = {...plot, ...res} - if (res.click === 'menu') { - delete _plot.menus - } else if (res.click === 'menus') { - delete _plot.menu - } else { - delete _plot.menus - delete _plot.menu - } - - delete _plot.MenuID - delete _plot.MenuName - delete _plot.MenuNo - delete _plot.tabType - - if (_plot.click === 'menu' && sessionStorage.getItem('appType') === '' && _plot.menu) { - let list = null - try { - list = JSON.parse(sessionStorage.getItem('thdMenuList')) || [] - } catch (e) { - list = [] - } - - let id = _plot.menu[_plot.menu.length - 1] - - list.forEach(item => { - if (item.MenuID === id) { - _plot.MenuID = id - _plot.MenuName = item.MenuName - _plot.MenuNo = item.MenuNo - _plot.tabType = item.type - } - }) - } + this.resetBase(_plot) this.setState({ plot: _plot, @@ -680,116 +418,28 @@ } changeTab = (tab) => { - const { config } = this.props const { plot, view } = this.state if (view === 'normal') { - this.props.form.validateFieldsAndScroll((err, values) => { - if (!err) { - let _plot = {...plot, ...values} + this.normalRef.handleConfirm().then(values => { + let _plot = {...plot, ...values} - if (_plot.datatype !== plot.datatype) { - _plot.colors = null - } - if (_plot.datatype === 'statistics') { - _plot.enabled = 'false' - _plot.customs = [] - _plot.colors = _plot.colors || [] - delete _plot.Yaxis - } else if (_plot.Yaxis) { - let yaxis = JSON.parse(JSON.stringify(_plot.Yaxis)) - let caxis = _plot.customs ? _plot.customs.map(m => m.type) : [] - yaxis.sort() - caxis.sort() - - if (JSON.stringify(yaxis) !== JSON.stringify(caxis)) { - let labels = {} - config.columns.forEach(col => { - labels[col.field] = col.label - }) - - let cus = {} - _plot.customs && _plot.customs.forEach(m => { - cus[m.type] = m - }) - _plot.customs = _plot.Yaxis.map((item, i) => { - if (cus[item]) return cus[item] - - return { - uuid: Utils.getuuid(), - type: item, - name: labels[item] || item, - axis: i === 0 ? 'true' : 'false', - label: _plot.label === 'false' ? 'false' : true, - title: 'true', - shape: _plot.chartType === 'bar' && i === 0 ? ['bar', 'rect'] : ['line', 'smooth'] - } - }) - - let cusColor = {} - let limit = chartColors.length - - _plot.colors && _plot.colors.forEach(m => { - cusColor[m.type] = m - }) - _plot.colors = _plot.Yaxis.map((item, i) => { - if (cusColor[item]) return cusColor[item] - - return { - uuid: Utils.getuuid(), - type: item, - label: labels[item] || item, - color: chartColors[i % limit], - color1: chartColors[i % limit] - } - }) - } - } - - this.setState({ - datatype: _plot.datatype, - plot: _plot, - view: tab - }) + if (_plot.datatype !== plot.datatype) { + _plot.colors = null } + + this.resetPlot(_plot) + + this.setState({ + plot: _plot, + view: tab + }) }) } else if (view === 'base') { this.baseRef.handleConfirm().then(res => { let _plot = {...plot, ...res} - if (res.click === 'menu') { - delete _plot.menus - } else if (res.click === 'menus') { - delete _plot.menu - } else { - delete _plot.menus - delete _plot.menu - } - - delete _plot.MenuID - delete _plot.MenuName - delete _plot.MenuNo - delete _plot.tabType - - if (_plot.click === 'menu' && sessionStorage.getItem('appType') === '' && _plot.menu) { - let list = null - try { - list = JSON.parse(sessionStorage.getItem('thdMenuList')) || [] - } catch (e) { - list = [] - } - - let id = _plot.menu[_plot.menu.length - 1] - - list.forEach(item => { - if (item.MenuID === id) { - _plot.MenuID = id - _plot.MenuName = item.MenuName - _plot.MenuNo = item.MenuNo - _plot.tabType = item.type - } - }) - } + this.resetBase(_plot) if (!plot.Xaxis && (tab === 'color' || tab === 'custom')) { this.setState({ @@ -814,6 +464,114 @@ view: tab }) } + } + + resetBase = (_plot) => { + if (_plot.click === 'menu') { + delete _plot.menus + delete _plot.menuType + } else if (_plot.click === 'menus') { + delete _plot.menu + } else { + delete _plot.menus + delete _plot.menu + delete _plot.menuType + } + + delete _plot.MenuID + delete _plot.MenuName + delete _plot.MenuNo + delete _plot.tabType + + if (_plot.click === 'menu' && sessionStorage.getItem('appType') === '' && _plot.menu) { + let list = null + try { + list = JSON.parse(sessionStorage.getItem('thdMenuList')) || [] + } catch (e) { + list = [] + } + + let id = _plot.menu[_plot.menu.length - 1] + + list.forEach(item => { + if (item.MenuID === id) { + _plot.MenuID = id + _plot.MenuName = item.MenuName + _plot.MenuNo = item.MenuNo + _plot.tabType = item.type + } + }) + } + } + + resetPlot = (_plot) => { + const { config } = this.props + + if (_plot.datatype === 'statistics') { + _plot.enabled = 'false' + _plot.customs = [] + _plot.colors = _plot.colors || [] + delete _plot.Yaxis + } else if (_plot.Yaxis) { + delete _plot.InfoType + delete _plot.InfoValue + + let yaxis = JSON.parse(JSON.stringify(_plot.Yaxis)) + let caxis = _plot.customs ? _plot.customs.map(m => m.type) : [] + yaxis.sort() + caxis.sort() + + if (JSON.stringify(yaxis) !== JSON.stringify(caxis)) { + let labels = {} + config.columns.forEach(col => { + labels[col.field] = col.label + }) + + let cus = {} + _plot.customs && _plot.customs.forEach(m => { + cus[m.type] = m + }) + _plot.customs = _plot.Yaxis.map((item, i) => { + if (cus[item]) return cus[item] + + return { + uuid: Utils.getuuid(), + type: item, + name: labels[item] || item, + axis: i === 0 ? 'true' : 'false', + label: _plot.label === 'false' ? 'false' : true, + title: 'true', + shape: _plot.chartType === 'bar' && i === 0 ? ['bar', 'rect'] : ['line', 'smooth'] + } + }) + + let cusColor = {} + let limit = chartColors.length + + _plot.colors && _plot.colors.forEach(m => { + cusColor[m.type] = m + }) + _plot.colors = _plot.Yaxis.map((item, i) => { + if (cusColor[item]) return cusColor[item] + + return { + uuid: Utils.getuuid(), + type: item, + label: labels[item] || item, + color: chartColors[i % limit], + color1: chartColors[i % limit] + } + }) + } + } + } + + transVals = (values, key) => { + if (key !== 'datatype') return + + this.setState({ + datatype: values.datatype + }) } addColor = () => { @@ -862,7 +620,7 @@ render() { const { config } = this.props - const { view, visible, datatype, plot, ramp, colorColumns, barColorColumns, rampColorColumns, statColorColumns, rampStatColorColumns, cusColumns, baseFormlist } = this.state + const { view, visible, datatype, plot, colorColumns, barColorColumns, rampColorColumns, statColorColumns, rampStatColorColumns, cusColumns, baseFormlist, formlist } = this.state const formItemLayout = { labelCol: { xs: { span: 24 }, @@ -889,12 +647,10 @@ {config.name ? <div className="mk-com-name">{config.name} - 缂栬緫</div> : null} <Tabs activeKey={view} className="menu-chart-edit-box" onChange={this.changeTab}> <TabPane tab="缁勪欢璁剧疆" key="base"> - <NormalForm formlist={baseFormlist} inputSubmit={this.onSubmit} wrappedComponentRef={(inst) => this.baseRef = inst}/> + <ModalForm formlist={baseFormlist} inputSubmit={this.onSubmit} wrappedComponentRef={(inst) => this.baseRef = inst}/> </TabPane> <TabPane tab="鍥捐〃璁剧疆" key="normal"> - <Form {...formItemLayout}> - <Row gutter={16}>{this.getFields()}</Row> - </Form> + <ModalForm formlist={formlist} inputSubmit={this.onSubmit} transVals={this.transVals} wrappedComponentRef={(inst) => this.normalRef = inst}/> </TabPane> {plot ? <TabPane tab="棰滆壊璁剧疆" key="color"> <div> @@ -919,8 +675,8 @@ </Form> </Col> : null} {datatype === 'statistics' ? <Button className="color-add mk-green" onClick={this.addColor}>娣诲姞</Button> : null} - {datatype === 'statistics' ? <EditTable actions={['edit', 'move', 'del']} data={plot.colors || []} columns={ramp ==='true' ? rampStatColorColumns : statColorColumns} onChange={this.changeColor}/> : null} - {datatype !== 'statistics' ? <EditTable actions={['edit']} data={plot.colors || []} columns={ramp ==='true' ? rampColorColumns : colorColumns} onChange={this.changeColor}/> : null} + {datatype === 'statistics' ? <EditTable actions={['edit', 'move', 'del']} data={plot.colors || []} columns={plot.ramp ==='true' ? rampStatColorColumns : statColorColumns} onChange={this.changeColor}/> : null} + {datatype !== 'statistics' ? <EditTable actions={['edit']} data={plot.colors || []} columns={plot.ramp ==='true' ? rampColorColumns : colorColumns} onChange={this.changeColor}/> : null} {plot.chartType === 'bar' && plot.datatype === 'query' ? <div className="mk-bar-colors"> <p>鏌卞舰棰滆壊锛氬彲鏍规嵁鏌卞浘搴忓彿璁剧疆棰滆壊锛堣璁剧疆鏌卞舰瀹藉害锛夈�傛敞锛氫娇鐢ㄨ嚜瀹氫箟鍥惧舰璁剧疆鎴栧鏍规煴鍥炬椂鏃犳晥銆�</p> <div className="bar-color-add"><PlusOutlined onClick={this.addbarColor}/></div> diff --git a/src/menu/components/chart/antv-bar/chartcompile/index.scss b/src/menu/components/chart/antv-bar/chartcompile/index.scss index 4fe430a..9e4f721 100644 --- a/src/menu/components/chart/antv-bar/chartcompile/index.scss +++ b/src/menu/components/chart/antv-bar/chartcompile/index.scss @@ -8,11 +8,6 @@ .ant-radio-wrapper { margin-right: 5px; } - .color-sketch-block { - position: relative; - top: 5px; - width: 240px; - } .color-add { float: right; margin-bottom: 10px; diff --git a/src/menu/components/table/edit-table/options.jsx b/src/menu/components/table/edit-table/options.jsx index 2c88ad3..bd21bbb 100644 --- a/src/menu/components/table/edit-table/options.jsx +++ b/src/menu/components/table/edit-table/options.jsx @@ -54,7 +54,7 @@ required: false }, { - type: 'radio', + type: 'select', field: 'commit', label: '鏁版嵁鎻愪氦', initval: wrap.commit || 'all', @@ -64,7 +64,23 @@ {value: 'all', label: '鍏ㄩ儴'}, {value: 'change', label: '淇敼椤�'}, {value: 'amend', label: '淇敼椤癸紙鍏級'}, - ] + {value: 'check', label: '鍕鹃�夐」'}, + ], + reset_source: true, + callback: (map, record, MKEmitter) => { + let _tableType = map.get('tableType') + + _tableType.options[0].disabled = record.commit === 'check' + _tableType.oriOptions[0].disabled = record.commit === 'check' + + map.set('tableType', _tableType) + + if (record.commit === 'check' && !record.tableType) { + setTimeout(() => { + MKEmitter.emit('mkFC', 'input', 'tableType', 'radio') + }, 50) + } + } }, { type: 'radio', @@ -97,7 +113,7 @@ initval: wrap.tableType || '', required: false, options: [ - {value: '', label: '涓嶅彲閫�'}, + {value: '', label: '涓嶅彲閫�', disabled: wrap.commit === 'check'}, {value: 'radio', label: '鍗曢��'}, {value: 'checkbox', label: '澶氶��'}, ] diff --git a/src/tabviews/custom/components/chart/antv-bar-line/index.jsx b/src/tabviews/custom/components/chart/antv-bar-line/index.jsx index bb1006e..1814eb8 100644 --- a/src/tabviews/custom/components/chart/antv-bar-line/index.jsx +++ b/src/tabviews/custom/components/chart/antv-bar-line/index.jsx @@ -1124,9 +1124,6 @@ } if (plot.label !== 'false') { _chart.label(_valfield, (value) => { - if (plot.labelValue === 'zero' && value === 0) { - return null - } let val = value if (plot.show === 'percent') { val = value + '%' @@ -1415,7 +1412,7 @@ } if (plot.$label !== 'false') { _chart.label('value*key', (value, key) => { - if (plot.labelValue === 'zero' && value === 0) { + if (plot.$label !== 'true' && value === 0) { return null } @@ -1478,7 +1475,7 @@ } if (plot.$label !== 'false') { _chart.label('value*key', (value, key) => { - if (plot.labelValue === 'zero' && value === 0) { + if (plot.$label !== 'true' && value === 0) { return null } @@ -1574,7 +1571,7 @@ } if (item.label !== 'false') { _chart.label(item.name, (value) => { - if (plot.labelValue === 'zero' && value === 0) { + if (plot.label !== 'true' && value === 0) { return null } @@ -1645,10 +1642,6 @@ if (item.label === 'true') { _chart.label(item.name, (value) => { - if (plot.labelValue === 'zero' && value === 0) { - return null - } - let val = value if (item.show === 'percent') { val = value + '%' @@ -1892,7 +1885,7 @@ } if (plot.label !== 'false') { _chart.label(`${_valfield}*${_typefield}`, (value, key) => { - if (plot.labelValue === 'zero' && value === 0) { + if (plot.label !== 'true' && value === 0) { return null } @@ -1978,7 +1971,7 @@ } if (plot.label !== 'false') { _chart.label(`${_valfield}*${_typefield}`, (value, key) => { - if (plot.labelValue === 'zero' && value === 0) { + if (plot.label !== 'true' && value === 0) { return null } diff --git a/src/tabviews/custom/components/table/edit-table/normalTable/index.jsx b/src/tabviews/custom/components/table/edit-table/normalTable/index.jsx index fcdad35..9a9d454 100644 --- a/src/tabviews/custom/components/table/edit-table/normalTable/index.jsx +++ b/src/tabviews/custom/components/table/edit-table/normalTable/index.jsx @@ -2017,7 +2017,7 @@ setTimeout(() => { this.plusLine(colId) }, 10) - } else if (edData[index] && setting.commit !== 'change') { + } else if (edData[index] && (setting.commit === 'all' || setting.commit === 'amend')) { setTimeout(() => { this.submit() }, 10) @@ -2158,7 +2158,7 @@ checkData = () => { const { setting } = this.props - const { edData, forms, checkForms } = this.state + const { edData, forms, checkForms, selectedRowKeys } = this.state let data = fromJS(edData).toJS() @@ -2166,6 +2166,17 @@ if (setting.commit === 'amend') { data = data.filter(item => !item.$origin) + } else if (setting.commit === 'check') { + data = data.filter(item => selectedRowKeys.includes(item.$$uuid)) + + if (data.length === 0) { + notification.warning({ + top: 92, + message: '璇烽�夋嫨闇�瑕佹彁浜ょ殑鏁版嵁锛�', + duration: 5 + }) + return null + } } if (data.length === 0) { -- Gitblit v1.8.0