| | |
| | | color: unset; |
| | | } |
| | | |
| | | // 重置按钮中文字与图标距离 |
| | | .ant-btn > .anticon + span, .ant-btn > span + .anticon { |
| | | margin-left: 5px; |
| | | // 重置按钮加载中样式 |
| | | .ant-btn.ant-btn-loading .anticon:not(.anticon-loading) { |
| | | transition: all 0.3s; |
| | | } |
| | | .ant-btn.ant-btn-loading >.anticon-loading + span .anticon, .ant-btn.ant-btn-loading >.anticon-loading + .anticon { |
| | | width: 0; |
| | | opacity: 0; |
| | | margin-left: 0px!important; |
| | | margin-right: 0px!important; |
| | | } |
| | | |
| | | // 设置下拉搜索滚动条样式 |
| | |
| | | const CodeMirror = asyncComponent(() => import('@/templates/zshare/codemirror')) |
| | | const MKTable = asyncComponent(() => import('@/components/normalform/modalform/mkTable')) |
| | | const acTyOptions = { |
| | | pop: ['label', 'OpenType', 'intertype', 'Ot', 'show', 'swipe', 'icon', 'class', 'color', 'execSuccess', 'execError', 'syncComponent', 'switchTab', 'anchors', 'width', 'openmenu', 'refreshTab', 'position', 'tipTitle', 'hoverTitle', 'hidden', 'preButton', 'formCache'], |
| | | prompt: ['label', 'OpenType', 'intertype', 'Ot', 'show', 'swipe', 'icon', 'class', 'color', 'execSuccess', 'execError', 'syncComponent', 'switchTab', 'anchors', 'width', 'openmenu', 'refreshTab', 'position', 'tipTitle', 'hoverTitle', 'hidden', 'preButton', 'formCache'], |
| | | exec: ['label', 'OpenType', 'intertype', 'Ot', 'show', 'swipe', 'icon', 'class', 'color', 'execSuccess', 'execError', 'syncComponent', 'switchTab', 'anchors', 'width', 'openmenu', 'refreshTab', 'hoverTitle', 'hidden', 'preButton', 'formCache'], |
| | | excelIn: ['label', 'Ot', 'OpenType', 'intertype', 'show', 'icon', 'class', 'color', 'sheet', 'execSuccess', 'execError', 'syncComponent', 'switchTab', 'width', 'hidden'], |
| | | excelOut: ['label', 'Ot', 'OpenType', 'intertype', 'show', 'icon', 'class', 'color', 'execSuccess', 'execError', 'syncComponent', 'switchTab', 'pagination', 'search', 'width', 'hidden'], |
| | | popview: ['label', 'Ot', 'OpenType', 'show', 'icon', 'class', 'color', 'popClose', 'width', 'display', 'ratio', 'syncComponent', 'clickouter', 'maskStyle', 'closeButton', 'hidden'], |
| | | tab: ['label', 'Ot', 'OpenType', 'show', 'icon', 'class', 'color', 'linkmenu', 'width', 'hidden', 'openTab'], |
| | | innerpage: ['label', 'Ot', 'OpenType', 'pageTemplate', 'show', 'swipe', 'icon', 'class', 'color', 'width', 'hidden'], |
| | | funcbutton: ['label', 'OpenType', 'funcType', 'show', 'swipe', 'icon', 'class', 'color', 'width', 'hidden'], |
| | | pop: ['label', 'OpenType', 'intertype', 'Ot', 'show', 'hover', 'swipe', 'icon', 'class', 'color', 'execSuccess', 'execError', 'syncComponent', 'switchTab', 'anchors', 'width', 'openmenu', 'refreshTab', 'position', 'tipTitle', 'hoverTitle', 'hidden', 'preButton', 'formCache'], |
| | | prompt: ['label', 'OpenType', 'intertype', 'Ot', 'show', 'hover', 'swipe', 'icon', 'class', 'color', 'execSuccess', 'execError', 'syncComponent', 'switchTab', 'anchors', 'width', 'openmenu', 'refreshTab', 'position', 'tipTitle', 'hoverTitle', 'hidden', 'preButton', 'formCache'], |
| | | exec: ['label', 'OpenType', 'intertype', 'Ot', 'show', 'hover', 'swipe', 'icon', 'class', 'color', 'execSuccess', 'execError', 'syncComponent', 'switchTab', 'anchors', 'width', 'openmenu', 'refreshTab', 'hoverTitle', 'hidden', 'preButton', 'formCache'], |
| | | excelIn: ['label', 'Ot', 'OpenType', 'intertype', 'show', 'hover', 'icon', 'class', 'color', 'sheet', 'execSuccess', 'execError', 'syncComponent', 'switchTab', 'width', 'hidden'], |
| | | excelOut: ['label', 'Ot', 'OpenType', 'intertype', 'show', 'hover', 'icon', 'class', 'color', 'execSuccess', 'execError', 'syncComponent', 'switchTab', 'pagination', 'search', 'width', 'hidden'], |
| | | popview: ['label', 'Ot', 'OpenType', 'show', 'hover', 'icon', 'class', 'color', 'popClose', 'width', 'display', 'ratio', 'syncComponent', 'clickouter', 'maskStyle', 'closeButton', 'hidden'], |
| | | tab: ['label', 'Ot', 'OpenType', 'show', 'hover', 'icon', 'class', 'color', 'linkmenu', 'width', 'hidden', 'openTab'], |
| | | innerpage: ['label', 'Ot', 'OpenType', 'pageTemplate', 'show', 'hover', 'swipe', 'icon', 'class', 'color', 'width', 'hidden'], |
| | | funcbutton: ['label', 'OpenType', 'funcType', 'show', 'hover', 'swipe', 'icon', 'class', 'color', 'width', 'hidden'], |
| | | form: ['label', 'OpenType', 'formType', 'intertype', 'Ot', 'execSuccess', 'execError', 'syncComponent', 'width', 'openmenu', 'refreshTab', 'title', 'hidden'] |
| | | } |
| | | |
| | |
| | | }, |
| | | { |
| | | type: 'radio', |
| | | key: 'hover', |
| | | label: '悬浮效果', |
| | | initVal: card.hover || '', |
| | | tooltip: '鼠标悬浮按钮上方时的颜色变化。', |
| | | required: false, |
| | | forbid: type === 'card' || appType === 'mob', |
| | | options: [{ |
| | | value: '', |
| | | text: '无' |
| | | }, { |
| | | value: 'mk-btn-hover-bg', |
| | | text: '背景变化' |
| | | }, { |
| | | value: 'mk-btn-hover-border', |
| | | text: '边框变化' |
| | | }] |
| | | }, |
| | | { |
| | | type: 'radio', |
| | | key: 'swipe', |
| | | label: "滑动显示", |
| | | initVal: card.swipe === 'false' ? 'left' : (card.swipe || 'left'), // 移动端仅保留滑动显示按钮 |
| | |
| | | }] |
| | | }, |
| | | { |
| | | type: 'radio', |
| | | key: 'hover', |
| | | label: '悬浮效果', |
| | | initVal: card.hover || '', |
| | | tooltip: '鼠标悬浮按钮上方时的颜色变化。', |
| | | required: false, |
| | | options: [{ |
| | | value: '', |
| | | text: '无' |
| | | }, { |
| | | value: 'mk-btn-hover-bg', |
| | | text: '背景变化' |
| | | }, { |
| | | value: 'mk-btn-hover-border', |
| | | text: '边框变化' |
| | | }] |
| | | }, |
| | | { |
| | | type: 'icon', |
| | | key: 'icon', |
| | | label: '图标', |
| | |
| | | |
| | | let _actions = [] // 工具栏按钮 |
| | | let _operations = [] // 操作列按钮(存在时) |
| | | let colors = { primary: '#1890ff', yellow: '#c49f47', orange: 'orange', danger: '#ff4d4f', green: '#26C281', dgreen: '#32c5d2', purple: '#8E44AD', cyan: '#13c2c2', gray: '#E7E7EF', default: 'rgba(0, 0, 0, 0.65)' } |
| | | |
| | | config.action.forEach(item => { |
| | | item.logLabel = MenuName + '-' + item.label // 用于sPC_TableData_InUpDe记录操作按钮 |
| | |
| | | } |
| | | } |
| | | |
| | | item.show = 'button' |
| | | |
| | | let _c = item.class ? item.class.replace('border-', '') : '' |
| | | let color = colors[_c] || '#1890ff' |
| | | |
| | | if (item.position === 'toolbar') { |
| | | item.$toolbtn = true |
| | | |
| | | if (item.class === 'default') { |
| | | item.style = {color: 'rgba(0, 0, 0, 0.65)', backgroundColor: '#fff', borderColor: '#d9d9d9', marginRight: '15px'} |
| | | } else if (item.class.indexOf('border') > -1) { |
| | | item.style = {color: color, backgroundColor: '#fff', borderColor: color, marginRight: '15px'} |
| | | } else { |
| | | item.style = {color: item.class === 'gray' ? 'rgba(0, 0, 0, 0.65)' : '#fff', backgroundColor: color, borderColor: color, marginRight: '15px'} |
| | | } |
| | | |
| | | _actions.push(item) |
| | | } else if (item.position === 'grid') { |
| | | item.style = {color: color, backgroundColor: 'transparent', borderColor: 'transparent'} |
| | | _operations.push(item) |
| | | } |
| | | }) |
| | |
| | | |
| | | let _actions = [] // 工具栏按钮 |
| | | let _operations = [] // 操作列按钮(存在时) |
| | | let colors = { primary: '#1890ff', yellow: '#c49f47', orange: 'orange', danger: '#ff4d4f', green: '#26C281', dgreen: '#32c5d2', purple: '#8E44AD', cyan: '#13c2c2', gray: '#E7E7EF', default: 'rgba(0, 0, 0, 0.65)' } |
| | | |
| | | config.action.forEach(item => { |
| | | item.logLabel = Tab.label + '-' + item.label // 用于sPC_TableData_InUpDe记录操作按钮 |
| | |
| | | } |
| | | } |
| | | |
| | | item.show = 'button' |
| | | |
| | | let _c = item.class ? item.class.replace('border-', '') : '' |
| | | let color = colors[_c] || '#1890ff' |
| | | |
| | | if (item.position === 'toolbar') { |
| | | item.$toolbtn = true |
| | | |
| | | if (item.class === 'default') { |
| | | item.style = {color: 'rgba(0, 0, 0, 0.65)', backgroundColor: '#fff', borderColor: '#d9d9d9', marginRight: '15px'} |
| | | } else if (item.class.indexOf('border') > -1) { |
| | | item.style = {color: color, backgroundColor: '#fff', borderColor: color, marginRight: '15px'} |
| | | } else { |
| | | item.style = {color: item.class === 'gray' ? 'rgba(0, 0, 0, 0.65)' : '#fff', backgroundColor: color, borderColor: color, marginRight: '15px'} |
| | | } |
| | | |
| | | _actions.push(item) |
| | | } else if (item.position === 'grid') { |
| | | item.style = {color: color, backgroundColor: 'transparent', borderColor: 'transparent'} |
| | | _operations.push(item) |
| | | } |
| | | }) |
| | |
| | | |
| | | let _actions = [] // 工具栏按钮 |
| | | let _operations = [] // 操作列按钮(存在时) |
| | | let colors = { primary: '#1890ff', yellow: '#c49f47', orange: 'orange', danger: '#ff4d4f', green: '#26C281', dgreen: '#32c5d2', purple: '#8E44AD', cyan: '#13c2c2', gray: '#E7E7EF', default: 'rgba(0, 0, 0, 0.65)' } |
| | | |
| | | config.action.forEach(item => { |
| | | item.logLabel = Tab.label + '-' + item.label // 用于sPC_TableData_InUpDe记录操作按钮 |
| | |
| | | } |
| | | } |
| | | |
| | | item.show = 'button' |
| | | |
| | | let _c = item.class ? item.class.replace('border-', '') : '' |
| | | let color = colors[_c] || '#1890ff' |
| | | |
| | | if (item.position === 'toolbar') { |
| | | item.$toolbtn = true |
| | | |
| | | if (item.class === 'default') { |
| | | item.style = {color: 'rgba(0, 0, 0, 0.65)', backgroundColor: '#fff', borderColor: '#d9d9d9', marginRight: '15px'} |
| | | } else if (item.class.indexOf('border') > -1) { |
| | | item.style = {color: color, backgroundColor: '#fff', borderColor: color, marginRight: '15px'} |
| | | } else { |
| | | item.style = {color: item.class === 'gray' ? 'rgba(0, 0, 0, 0.65)' : '#fff', backgroundColor: color, borderColor: color, marginRight: '15px'} |
| | | } |
| | | |
| | | _actions.push(item) |
| | | } else if (item.position === 'grid') { |
| | | item.style = {color: color, backgroundColor: 'transparent', borderColor: 'transparent'} |
| | | _operations.push(item) |
| | | } |
| | | }) |
| | |
| | | if (hidden) return null |
| | | |
| | | let label = '' |
| | | let icon = '' |
| | | let type = 'link' |
| | | let className = '' |
| | | |
| | | if (btn.show === 'button') { |
| | | label = btn.label |
| | | icon = btn.icon || '' |
| | | } else if (btn.show === 'link') { |
| | | if (btn.show === 'link') { |
| | | label = <span>{btn.label}{btn.icon ? <MkIcon style={{marginLeft: '8px'}} type={btn.icon}/> : ''}</span> |
| | | icon = '' |
| | | } else if (btn.show === 'icon') { |
| | | icon = btn.icon || '' |
| | | } else if (!btn.$toolbtn) { |
| | | icon = btn.icon || '' |
| | | label = btn.label |
| | | className = 'mk-btn mk-' + btn.class |
| | | label = !loading ? <MkIcon type={btn.icon} /> : null |
| | | } else { |
| | | type = '' |
| | | icon = btn.icon || '' |
| | | label = btn.label |
| | | className = 'mk-btn mk-' + btn.class |
| | | label = <span>{!loading && btn.icon ? <MkIcon style={{marginRight: '8px'}} type={btn.icon} /> : ''}{btn.label}</span> |
| | | } |
| | | |
| | | return ( |
| | | <Button |
| | | type={type} |
| | | type="link" |
| | | title={disabled ? (btn.reason || '') : (btn.show === 'icon' ? btn.label : '')} |
| | | loading={loading} |
| | | disabled={disabled} |
| | | style={btn.style} |
| | | icon={icon} |
| | | className={className} |
| | | className={btn.$toolbtn ? (btn.hover || '') : ''} |
| | | onClick={(e) => {e.stopPropagation(); this.actionTrigger()}} |
| | | >{label}</Button> |
| | | ) |
| | |
| | | if (hidden) return null |
| | | |
| | | let label = '' |
| | | let icon = '' |
| | | let type = 'link' |
| | | let className = '' |
| | | |
| | | if (btn.show === 'button') { |
| | | label = btn.label |
| | | icon = btn.icon || '' |
| | | } else if (btn.show === 'link') { |
| | | if (btn.show === 'link') { |
| | | label = <span>{btn.label}{btn.icon ? <MkIcon style={{marginLeft: '8px'}} type={btn.icon}/> : ''}</span> |
| | | icon = '' |
| | | } else if (btn.show === 'icon') { |
| | | icon = btn.icon || '' |
| | | } else if (!btn.$toolbtn) { |
| | | icon = btn.icon || '' |
| | | label = btn.label |
| | | className = 'mk-btn mk-' + btn.class |
| | | label = <MkIcon type={btn.icon} /> |
| | | } else { |
| | | type = '' |
| | | icon = btn.icon || '' |
| | | label = btn.label |
| | | className = 'mk-btn mk-' + btn.class |
| | | label = <span>{btn.icon ? <MkIcon style={{marginRight: '8px'}} type={btn.icon} /> : ''}{btn.label}</span> |
| | | } |
| | | |
| | | return ( |
| | | <Button |
| | | type={type} |
| | | type="link" |
| | | title={disabled ? (btn.reason || '') : (btn.show === 'icon' ? btn.label : '')} |
| | | disabled={disabled} |
| | | style={btn.style} |
| | | icon={icon} |
| | | className={className} |
| | | className={btn.$toolbtn ? (btn.hover || '') : ''} |
| | | onClick={(e) => {e.stopPropagation(); this.actionTrigger()}} |
| | | >{label}</Button> |
| | | ) |
| | |
| | | if (hidden) return null |
| | | |
| | | let label = '' |
| | | let icon = '' |
| | | let type = 'link' |
| | | let className = '' |
| | | |
| | | if (btn.show === 'button') { |
| | | label = btn.label |
| | | icon = btn.icon || '' |
| | | } else if (btn.show === 'link') { |
| | | if (btn.show === 'link') { |
| | | label = <span>{btn.label}{btn.icon ? <MkIcon style={{marginLeft: '8px'}} type={btn.icon}/> : ''}</span> |
| | | icon = '' |
| | | } else if (btn.show === 'icon') { |
| | | icon = btn.icon || 'upload' |
| | | } else if (!btn.$toolbtn) { |
| | | icon = btn.icon || '' |
| | | label = btn.label |
| | | className = 'mk-btn mk-' + btn.class |
| | | label = !loading ? <MkIcon type={btn.icon} /> : null |
| | | } else { |
| | | type = '' |
| | | icon = btn.icon || '' |
| | | label = btn.label |
| | | className = 'mk-btn mk-' + btn.class |
| | | label = <span>{!loading && btn.icon ? <MkIcon style={{marginRight: '8px'}} type={btn.icon} /> : ''}{btn.label}</span> |
| | | } |
| | | |
| | | return <> |
| | | <Button |
| | | type={type} |
| | | type="link" |
| | | id={'button' + btn.uuid} |
| | | title={disabled ? (btn.reason || '') : (btn.show === 'icon' ? btn.label : '')} |
| | | loading={loading} |
| | | disabled={disabled} |
| | | style={btn.style} |
| | | icon={icon} |
| | | className={className} |
| | | className={btn.$toolbtn ? (btn.hover || '') : ''} |
| | | onClick={(e) => {e.stopPropagation(); this.actionTrigger()}} |
| | | >{label}</Button> |
| | | <ExcelIn btn={btn} triggerExcelIn={() => this.setState({ loading: true })} returndata={this.getexceldata} ref="excelIn" /> |
| | |
| | | if (hidden) return null |
| | | |
| | | let label = '' |
| | | let icon = '' |
| | | let type = 'link' |
| | | let className = '' |
| | | |
| | | if (btn.show === 'button') { |
| | | label = btn.label |
| | | icon = btn.icon || '' |
| | | } else if (btn.show === 'link') { |
| | | if (btn.show === 'link') { |
| | | label = <span>{btn.label}{btn.icon ? <MkIcon style={{marginLeft: '8px'}} type={btn.icon}/> : ''}</span> |
| | | icon = '' |
| | | } else if (btn.show === 'icon') { |
| | | icon = btn.icon || 'download' |
| | | } else if (!btn.$toolbtn) { |
| | | icon = btn.icon || '' |
| | | label = btn.label |
| | | className = 'mk-btn mk-' + btn.class |
| | | label = !loading ? <MkIcon type={btn.icon} /> : null |
| | | } else { |
| | | type = '' |
| | | icon = btn.icon || '' |
| | | label = btn.label |
| | | className = 'mk-btn mk-' + btn.class |
| | | label = <span>{!loading && btn.icon ? <MkIcon style={{marginRight: '8px'}} type={btn.icon} /> : ''}{btn.label}</span> |
| | | } |
| | | |
| | | return ( |
| | | <Button |
| | | type={type} |
| | | type="link" |
| | | id={'button' + btn.uuid} |
| | | title={disabled ? (btn.reason || '') : (btn.show === 'icon' ? btn.label : '')} |
| | | loading={loading} |
| | | disabled={disabled} |
| | | style={btn.style || null} |
| | | icon={icon} |
| | | className={className} |
| | | className={btn.$toolbtn ? (btn.hover || '') : ''} |
| | | onClick={(e) => {e.stopPropagation(); this.actionTrigger()}} |
| | | >{label}</Button> |
| | | ) |
| | |
| | | const { btn } = this.props |
| | | const { loading } = this.state |
| | | |
| | | let label = '' |
| | | let icon = '' |
| | | let type = 'link' |
| | | let className = '' |
| | | let style = {...btn.style} |
| | | |
| | | if (loading) { |
| | | style.opacity = 0 |
| | | } |
| | | |
| | | if (btn.show === 'button') { |
| | | label = btn.label |
| | | icon = btn.icon || '' |
| | | } else if (btn.show === 'link') { |
| | | let label = '' |
| | | |
| | | if (btn.show === 'link') { |
| | | label = <span>{btn.label}{btn.icon ? <MkIcon style={{marginLeft: '8px'}} type={btn.icon}/> : ''}</span> |
| | | icon = '' |
| | | } else if (btn.show === 'icon') { |
| | | icon = btn.icon || '' |
| | | } else if (!btn.$toolbtn) { |
| | | icon = btn.icon || '' |
| | | label = btn.label |
| | | className = 'mk-btn mk-' + btn.class |
| | | label = <MkIcon type={btn.icon} /> |
| | | } else { |
| | | type = '' |
| | | icon = btn.icon || '' |
| | | label = btn.label |
| | | className = 'mk-btn mk-' + btn.class |
| | | label = <span>{btn.icon ? <MkIcon style={{marginRight: '8px'}} type={btn.icon} /> : ''}{btn.label}</span> |
| | | } |
| | | |
| | | return ( |
| | | <Button |
| | | type={type} |
| | | type="link" |
| | | title={btn.show === 'icon' ? btn.label : ''} |
| | | style={style} |
| | | icon={icon} |
| | | className={className} |
| | | className={btn.$toolbtn ? (btn.hover || '') : ''} |
| | | onClick={(e) => {e.stopPropagation(); this.actionTrigger()}} |
| | | >{label}</Button> |
| | | ) |
| | |
| | | if (hidden) return null |
| | | |
| | | let label = '' |
| | | let icon = '' |
| | | let type = 'link' |
| | | let className = '' |
| | | |
| | | if (btn.show === 'button') { |
| | | label = btn.label |
| | | icon = btn.icon || '' |
| | | } else if (btn.show === 'link') { |
| | | if (btn.show === 'link') { |
| | | label = <span>{btn.label}{btn.icon ? <MkIcon style={{marginLeft: '8px'}} type={btn.icon}/> : ''}</span> |
| | | icon = '' |
| | | } else if (btn.show === 'icon') { |
| | | icon = btn.icon || '' |
| | | } else if (!btn.$toolbtn) { |
| | | icon = btn.icon || '' |
| | | label = btn.label |
| | | className = 'mk-btn mk-' + btn.class |
| | | label = !loading ? <MkIcon type={btn.icon} /> : null |
| | | } else if (btn.$toolbtn) { |
| | | label = <span>{!loading && btn.icon ? <MkIcon style={{marginRight: '8px'}} type={btn.icon} /> : ''}{loadingNumber && !loadingTotal ? `(${loadingNumber})` : ''}{btn.label}</span> |
| | | } else { |
| | | type = '' |
| | | icon = btn.icon || '' |
| | | label = btn.label |
| | | className = 'mk-btn mk-' + btn.class |
| | | } |
| | | |
| | | if (loadingNumber && !loadingTotal && btn.$toolbtn && (!btn.show || btn.show === 'button')) { |
| | | label = (loadingNumber && !loadingTotal ? `(${loadingNumber})` : '') + btn.label |
| | | label = <span>{!loading && btn.icon ? <MkIcon style={{marginRight: '8px'}} type={btn.icon} /> : ''}{btn.label}</span> |
| | | } |
| | | |
| | | return ( |
| | | <> |
| | | <Button |
| | | type={type} |
| | | type="link" |
| | | title={disabled ? (btn.reason || '') : (btn.show === 'icon' ? btn.label : '')} |
| | | loading={loading} |
| | | disabled={disabled} |
| | | style={btn.style} |
| | | icon={icon} |
| | | className={className} |
| | | className={btn.$toolbtn ? (btn.hover || '') : ''} |
| | | onClick={(e) => {e.stopPropagation(); this.actionTrigger()}} |
| | | >{label}</Button> |
| | | {this.getModels()} |
| | |
| | | if (hidden) return null |
| | | |
| | | let label = '' |
| | | let icon = '' |
| | | let type = 'link' |
| | | let className = '' |
| | | |
| | | if (btn.show === 'button') { |
| | | label = btn.label |
| | | icon = btn.icon || '' |
| | | } else if (btn.show === 'link') { |
| | | if (btn.show === 'link') { |
| | | label = <span>{btn.label}{btn.icon ? <MkIcon style={{marginLeft: '8px'}} type={btn.icon}/> : ''}</span> |
| | | icon = '' |
| | | } else if (btn.show === 'icon') { |
| | | icon = btn.icon || '' |
| | | } else if (!btn.$toolbtn) { |
| | | icon = btn.icon || '' |
| | | label = btn.label |
| | | className = 'mk-btn mk-' + btn.class |
| | | label = !loading ? <MkIcon type={btn.icon} /> : null |
| | | } else { |
| | | type = '' |
| | | icon = btn.icon || '' |
| | | label = btn.label |
| | | className = 'mk-btn mk-' + btn.class |
| | | label = <span>{!loading && btn.icon ? <MkIcon style={{marginRight: '8px'}} type={btn.icon} /> : ''}{btn.label}</span> |
| | | } |
| | | |
| | | return ( |
| | | <> |
| | | <Button |
| | | type={type} |
| | | type="link" |
| | | title={disabled ? (btn.reason || '') : (btn.show === 'icon' ? btn.label : '')} |
| | | loading={loading} |
| | | disabled={disabled} |
| | | style={btn.style} |
| | | icon={icon} |
| | | className={className} |
| | | className={btn.$toolbtn ? (btn.hover || '') : ''} |
| | | onClick={(e) => {e.stopPropagation(); this.actionTrigger()}} |
| | | >{label}</Button> |
| | | </> |
| | | ) |
| | | } |
| | | } |
| | |
| | | padding: 0 15px; |
| | | } |
| | | |
| | | .ant-btn.mk-btn-hover-bg:not([disabled]):hover { |
| | | opacity: 1!important; |
| | | color: #ffffff!important; |
| | | border-color: var(--mk-sys-color)!important; |
| | | background-color: var(--mk-sys-color)!important; |
| | | } |
| | | .ant-btn.mk-btn-hover-border:not([disabled]):hover { |
| | | opacity: 1!important; |
| | | color: var(--mk-sys-color)!important; |
| | | border-color: var(--mk-sys-color)!important; |
| | | background-color: #ffffff!important; |
| | | } |
| | | |
| | | .loading-skeleton { |
| | | background: -webkit-gradient(linear,left top,right top,color-stop(25%,#f5f5f5),color-stop(37%,#ffffff),color-stop(63%,#f5f5f5)); |
| | | background: linear-gradient(90deg,#f5f5f5 25%,#ffffff 37%,#f5f5f5 63%); |
| | |
| | | if (hidden) return null |
| | | |
| | | let label = '' |
| | | let icon = '' |
| | | let type = 'link' |
| | | let className = '' |
| | | |
| | | if (btn.show === 'button') { |
| | | label = name || btn.label |
| | | icon = btn.icon || '' |
| | | } else if (btn.show === 'link') { |
| | | if (btn.show === 'link') { |
| | | label = <span>{name || btn.label}{btn.icon ? <MkIcon style={{marginLeft: '8px'}} type={btn.icon}/> : ''}</span> |
| | | icon = '' |
| | | } else if (btn.show === 'icon') { |
| | | icon = btn.icon || '' |
| | | } else if (!btn.$toolbtn) { |
| | | icon = btn.icon || '' |
| | | label = btn.label |
| | | className = 'mk-btn mk-' + btn.class |
| | | label = <MkIcon type={btn.icon} /> |
| | | } else { |
| | | type = '' |
| | | icon = btn.icon || '' |
| | | label = btn.label |
| | | className = 'mk-btn mk-' + btn.class |
| | | label = <span>{btn.icon ? <MkIcon style={{marginRight: '8px'}} type={btn.icon} /> : ''}{name || btn.label}</span> |
| | | } |
| | | |
| | | return ( |
| | | <Button |
| | | type={type} |
| | | type="link" |
| | | id={'button' + btn.uuid} |
| | | title={disabled ? (btn.reason || '') : (btn.show === 'icon' ? btn.label : '')} |
| | | style={btn.style || null} |
| | | disabled={disabled} |
| | | icon={icon} |
| | | className={className} |
| | | className={btn.$toolbtn ? (btn.hover || '') : ''} |
| | | onClick={(e) => {e.stopPropagation(); this.actionTrigger()}} |
| | | >{label}</Button> |
| | | ) |
| | |
| | | } |
| | | |
| | | let label = '' |
| | | let icon = '' |
| | | let type = 'link' |
| | | let className = '' |
| | | |
| | | if (btn.show === 'button') { |
| | | label = name || btn.label |
| | | icon = btn.icon || '' |
| | | } else if (btn.show === 'link') { |
| | | if (btn.show === 'link') { |
| | | label = <span>{name || btn.label}{btn.icon ? <MkIcon style={{marginLeft: '8px'}} type={btn.icon}/> : ''}</span> |
| | | icon = '' |
| | | } else if (btn.show === 'icon') { |
| | | icon = btn.icon || '' |
| | | } else if (!btn.$toolbtn) { |
| | | icon = btn.icon || '' |
| | | label = btn.label |
| | | className = 'mk-btn mk-' + (btn.class || 'unset') |
| | | label = !loading ? <MkIcon type={btn.icon} /> : null |
| | | } else if (btn.$toolbtn) { |
| | | label = <span>{!loading && btn.icon ? <MkIcon style={{marginRight: '8px'}} type={btn.icon} /> : ''}{loadingNumber && !loadingTotal ? `(${loadingNumber})` : ''}{btn.label}</span> |
| | | } else { |
| | | type = '' |
| | | icon = btn.icon || '' |
| | | label = btn.label |
| | | className = 'mk-btn mk-' + (btn.class || 'unset') |
| | | } |
| | | |
| | | if (loadingNumber && btn.progress !== 'progressbar' && btn.$toolbtn && (!btn.show || btn.show === 'button')) { |
| | | label = (loadingNumber ? `(${loadingNumber})` : '') + btn.label |
| | | label = <span>{!loading && btn.icon ? <MkIcon style={{marginRight: '8px'}} type={btn.icon} /> : ''}{name || btn.label}</span> |
| | | } |
| | | |
| | | let BTN = <Button |
| | | type={type} |
| | | icon={icon} |
| | | type="link" |
| | | id={'button' + btn.uuid} |
| | | title={disabled ? (btn.reason || '') : (btn.show === 'icon' ? btn.label : '')} |
| | | loading={loading} |
| | | disabled={disabled} |
| | | style={btn.style} |
| | | className={className} |
| | | className={btn.$toolbtn ? (btn.hover || '') : ''} |
| | | onClick={(e) => {e.stopPropagation(); this.actionTrigger()}} |
| | | >{label}</Button> |
| | | |
| | |
| | | if (hidden) return null |
| | | |
| | | let label = '' |
| | | let icon = '' |
| | | let type = 'link' |
| | | let className = '' |
| | | |
| | | if (btn.show === 'button') { |
| | | label = name || btn.label |
| | | icon = btn.icon || '' |
| | | } else if (btn.show === 'link') { |
| | | if (btn.show === 'link') { |
| | | label = <span>{name || btn.label}{btn.icon ? <MkIcon style={{marginLeft: '8px'}} type={btn.icon}/> : ''}</span> |
| | | icon = '' |
| | | } else if (btn.show === 'icon') { |
| | | icon = btn.icon || '' |
| | | } else if (!btn.$toolbtn) { |
| | | icon = btn.icon || '' |
| | | label = btn.label |
| | | className = 'mk-btn mk-' + btn.class |
| | | label = !loading ? <MkIcon type={btn.icon} /> : null |
| | | } else { |
| | | type = '' |
| | | icon = btn.icon || '' |
| | | label = btn.label |
| | | className = 'mk-btn mk-' + btn.class |
| | | label = <span>{!loading && btn.icon ? <MkIcon style={{marginRight: '8px'}} type={btn.icon} /> : ''}{name || btn.label}</span> |
| | | } |
| | | |
| | | return ( |
| | | <> |
| | | <Button |
| | | type={type} |
| | | type="link" |
| | | id={'button' + btn.uuid} |
| | | title={disabled ? (btn.reason || '') : (btn.show === 'icon' ? btn.label : '')} |
| | | loading={loading && !name} |
| | | disabled={disabled} |
| | | style={btn.style} |
| | | icon={icon} |
| | | className={className} |
| | | className={btn.$toolbtn ? (btn.hover || '') : ''} |
| | | onClick={(e) => {e.stopPropagation(); this.actionTrigger()}} |
| | | >{label}</Button> |
| | | <span onClick={(e) => {e.stopPropagation()}} onDoubleClick={(e) => {e.stopPropagation()}}>{this.getPop()}</span> |
| | |
| | | if (hidden) return null |
| | | |
| | | let label = '' |
| | | let icon = '' |
| | | let type = 'link' |
| | | let className = '' |
| | | |
| | | if (btn.show === 'button') { |
| | | label = btn.label |
| | | icon = btn.icon || '' |
| | | } else if (btn.show === 'link') { |
| | | if (btn.show === 'link') { |
| | | label = <span>{btn.label}{btn.icon ? <MkIcon style={{marginLeft: '8px'}} type={btn.icon}/> : ''}</span> |
| | | icon = '' |
| | | } else if (btn.show === 'icon') { |
| | | icon = btn.icon || '' |
| | | } else if (!btn.$toolbtn) { |
| | | icon = btn.icon || '' |
| | | label = btn.label |
| | | className = 'mk-btn mk-' + btn.class |
| | | label = !loading ? <MkIcon type={btn.icon} /> : null |
| | | } else { |
| | | type = '' |
| | | icon = btn.icon || '' |
| | | label = btn.label |
| | | className = 'mk-btn mk-' + btn.class |
| | | label = <span>{!loading && btn.icon ? <MkIcon style={{marginRight: '8px'}} type={btn.icon} /> : ''}{btn.label}</span> |
| | | } |
| | | |
| | | return <> |
| | | <Button |
| | | type={type} |
| | | type="link" |
| | | id={'button' + btn.uuid} |
| | | title={disabled ? (btn.reason || '') : (btn.show === 'icon' ? btn.label : '')} |
| | | loading={loading} |
| | | disabled={disabled} |
| | | style={btn.style || null} |
| | | icon={icon} |
| | | className={className} |
| | | className={btn.$toolbtn ? (btn.hover || '') : ''} |
| | | onClick={(e) => {e.stopPropagation(); this.actionTrigger()}} |
| | | >{label}</Button> |
| | | <span onClick={(e) => {e.stopPropagation()}}>{this.getModels()}</span> |
| | |
| | | const { loading } = this.state |
| | | |
| | | let label = '' |
| | | let icon = '' |
| | | let type = 'link' |
| | | let className = '' |
| | | let style = {...btn.style} |
| | | |
| | | if (btn.show === 'button') { |
| | | label = btn.label |
| | | icon = btn.icon || '' |
| | | } else if (btn.show === 'link') { |
| | | if (btn.show === 'link') { |
| | | label = <span>{btn.label}{btn.icon ? <MkIcon style={{marginLeft: '8px'}} type={btn.icon}/> : ''}</span> |
| | | icon = '' |
| | | } else if (btn.show === 'icon') { |
| | | icon = btn.icon || '' |
| | | } else if (!btn.$toolbtn) { |
| | | icon = btn.icon || '' |
| | | label = btn.label |
| | | className = 'mk-btn mk-' + btn.class |
| | | label = !loading ? <MkIcon type={btn.icon} /> : null |
| | | } else { |
| | | type = '' |
| | | icon = btn.icon || '' |
| | | label = btn.label |
| | | className = 'mk-btn mk-' + btn.class |
| | | label = <span>{!loading && btn.icon ? <MkIcon style={{marginRight: '8px'}} type={btn.icon} /> : ''}{btn.label}</span> |
| | | } |
| | | |
| | | return ( |
| | | <Button |
| | | type={type} |
| | | type="link" |
| | | title={btn.show === 'icon' ? btn.label : ''} |
| | | style={style} |
| | | loading={loading} |
| | | icon={icon} |
| | | className={className} |
| | | style={btn.style || null} |
| | | className={btn.$toolbtn ? (btn.hover || '') : ''} |
| | | onClick={(e) => {e.stopPropagation(); this.actionTrigger()}} |
| | | >{label}</Button> |
| | | ) |
| | |
| | | if (hidden) return null |
| | | |
| | | let label = '' |
| | | let icon = '' |
| | | let type = 'link' |
| | | let className = '' |
| | | |
| | | if (btn.show === 'button') { |
| | | label = name || btn.label |
| | | icon = btn.icon || '' |
| | | } else if (btn.show === 'link') { |
| | | if (btn.show === 'link') { |
| | | label = <span>{name || btn.label}{btn.icon ? <MkIcon style={{marginLeft: '8px'}} type={btn.icon}/> : ''}</span> |
| | | icon = '' |
| | | } else if (btn.show === 'icon') { |
| | | icon = btn.icon || '' |
| | | } else if (!btn.$toolbtn) { |
| | | icon = btn.icon || '' |
| | | label = btn.label |
| | | className = 'mk-btn mk-' + btn.class |
| | | label = <MkIcon type={btn.icon} /> |
| | | } else { |
| | | type = '' |
| | | icon = btn.icon || '' |
| | | label = btn.label |
| | | className = 'mk-btn mk-' + btn.class |
| | | label = <span>{btn.icon ? <MkIcon style={{marginRight: '8px'}} type={btn.icon} /> : ''}{name || btn.label}</span> |
| | | } |
| | | |
| | | return ( |
| | | <Button |
| | | type={type} |
| | | type="link" |
| | | id={'button' + btn.uuid} |
| | | title={disabled ? (btn.reason || '') : (btn.show === 'icon' ? btn.label : '')} |
| | | style={btn.style || null} |
| | | disabled={disabled} |
| | | icon={icon} |
| | | className={className} |
| | | className={btn.$toolbtn ? (btn.hover || '') : ''} |
| | | onClick={(e) => {e.stopPropagation(); this.actionTrigger()}} |
| | | >{label}</Button> |
| | | ) |