| | |
| | | <div className={'ant-mk-text line' + (card.height || '')} style={{height: card.innerHeight || 'auto'}}>{val}</div> |
| | | ) |
| | | } else if (card.eleType === 'icon') { |
| | | return (<MkIcon style={{height: card.innerHeight || 'auto'}} className="ant-mk-icon" type={card.icon}/>) |
| | | return (<MkIcon style={{height: card.innerHeight || 'auto'}} className="ant-mk-icon" type={card.icon || 'bell'}/>) |
| | | } else if (card.eleType === 'slider') { |
| | | let val = card.value ? (card.value / card.maxValue) * 100 : 30 |
| | | return <MkProgress value={val} config={card}/> |
| | |
| | | number: ['eleType', 'datatype', 'width', 'height', 'prefix', 'postfix', 'noValue', 'fixStyle'], |
| | | picture: ['eleType', 'datatype', 'width', 'lenWidRadio', 'maxWidth', 'link', 'noValue'], |
| | | video: ['eleType', 'datatype', 'width', 'aspectRatio', 'autoPlay', 'loop', 'startTime', 'noValue', 'posterType'], |
| | | icon: ['eleType', 'icon', 'datatype', 'width'], |
| | | icon: ['eleType', 'datatype', 'width', 'tooltip'], |
| | | slider: ['eleType', 'datatype', 'width', 'color', 'maxValue', 'showInfo', 'showType', 'strokeWidth', 'strokeLinecap', 'trailColor'], |
| | | splitline: ['eleType', 'color', 'width', 'borderWidth'], |
| | | barcode: ['eleType', 'datatype', 'width', 'barHeight', 'displayValue', 'interval', 'noValue'], |
| | |
| | | if (datatype === 'dynamic') { |
| | | _options.push('field') |
| | | } else { |
| | | _options.push('tooltip') |
| | | _options.push('icon') |
| | | } |
| | | } |
| | | if (_options.includes('fixStyle') && fixStyle === 'alone') { |
| | |
| | | } else if (card.eleType === 'sequence') { // 拖拽添加类型转换 |
| | | card.eleType = 'text' |
| | | } |
| | | |
| | | let appMenus = [] |
| | | const isApp = sessionStorage.getItem('appType') === 'pc' |
| | | |
| | | if (isApp) { |
| | | appMenus = sessionStorage.getItem('appMenus') |
| | | if (appMenus) { |
| | | try { |
| | | appMenus = JSON.parse(appMenus) |
| | | } catch (e) { |
| | | appMenus = [] |
| | | } |
| | | } else { |
| | | appMenus = [] |
| | | } |
| | | if (card.eleType === 'icon' && card.datatype === 'dynamic' && !card.field) { // 拖拽添加类型转换 |
| | | card.datatype = 'static' |
| | | } |
| | | let appType = sessionStorage.getItem('appType') |
| | | |
| | | let tooltip = '' |
| | | if (cardCell.$cardType === 'extendCard') { |
| | |
| | | initVal: card.eleType, |
| | | required: true, |
| | | options: _options |
| | | }, |
| | | { |
| | | type: 'icon', |
| | | key: 'icon', |
| | | label: '图标', |
| | | initVal: card.icon, |
| | | required: true |
| | | }, |
| | | { |
| | | type: 'radio', |
| | |
| | | initVal: card.field || '', |
| | | required: true, |
| | | options: [] |
| | | }, |
| | | { |
| | | type: 'icon', |
| | | key: 'icon', |
| | | label: '图标', |
| | | initVal: card.icon, |
| | | required: true |
| | | }, |
| | | { |
| | | type: 'text', |
| | |
| | | key: 'tooltip', |
| | | label: '提示信息', |
| | | initVal: card.tooltip || '', |
| | | tooltip: '鼠标悬浮时显示。', |
| | | tooltip: '鼠标悬浮时显示。注:如使用动态信息,请在此处填写相应的字段名。', |
| | | forbid: appType === 'mob', |
| | | required: false |
| | | }, |
| | | { |
| | |
| | | { value: 'true', text: '可以' } |
| | | ] |
| | | }, |
| | | { |
| | | type: 'select', |
| | | key: 'linkmenu', |
| | | label: '关联菜单', |
| | | initVal: card.linkmenu || '', |
| | | required: true, |
| | | forbid: !isApp, |
| | | options: appMenus |
| | | }, |
| | | // { |
| | | // type: 'radio', |
| | | // key: 'open', |
| | | // label: '打开方式', |
| | | // initVal: card.open || 'blank', |
| | | // required: false, |
| | | // forbid: !isApp, |
| | | // options: [ |
| | | // { value: 'blank', text: '新页面' }, |
| | | // { value: 'self', text: '当前页面' } |
| | | // ] |
| | | // }, |
| | | { |
| | | type: 'select', |
| | | key: 'linkurl', |
| | |
| | | import React, {Component} from 'react' |
| | | import { Modal, Button, Row, Col, Input, message, Tabs, Empty, Pagination, notification } from 'antd' |
| | | import { Modal, Button, Row, Col, Input, message, Tabs, Empty, Pagination, notification, Typography } from 'antd' |
| | | import { PlusOutlined, CopyOutlined, EditOutlined, DeleteOutlined, PictureOutlined } from '@ant-design/icons' |
| | | |
| | | import Api from '@/api' |
| | | import Utils from '@/utils/utils.js' |
| | | import asyncComponent from '@/utils/asyncComponent' |
| | | import { minkeIconSystem } from '@/utils/option.js' |
| | | import MkIcon from '@/components/mk-icon' |
| | | import './index.scss' |
| | | |
| | | const { Search } = Input |
| | | const { confirm } = Modal |
| | | const { TabPane } = Tabs |
| | | const { Paragraph } = Typography |
| | | |
| | | const EditForm = asyncComponent(() => import('./editform')) |
| | | const Video = asyncComponent(() => import('./video')) |
| | |
| | | colorlist: [], |
| | | piclist: [], |
| | | vidlist: [], |
| | | iconlist: [...minkeIconSystem.direction, ...minkeIconSystem.edit, ...minkeIconSystem.normal, ...minkeIconSystem.data, ...minkeIconSystem.hint], |
| | | picIndex: 1, |
| | | vidIndex: 1, |
| | | } |
| | |
| | | } |
| | | |
| | | render() { |
| | | const { visible, editvisible, card, filpictures, filvideos, piclist, vidlist, imageKey, videoKey, pageSize, picIndex, vidIndex, colorlist } = this.state |
| | | const { visible, editvisible, card, filpictures, filvideos, piclist, vidlist, imageKey, videoKey, pageSize, picIndex, vidIndex, colorlist, iconlist } = this.state |
| | | |
| | | return ( |
| | | <div style={{display: 'inline-block'}}> |
| | |
| | | {!colorlist.length ? <Empty description={null}/> : null} |
| | | </Row> |
| | | </TabPane> |
| | | <TabPane tab="图标库" key="icon"> |
| | | <Row gutter={16}> |
| | | {iconlist.map(item => ( |
| | | <Col className="icon-wrap" span={4} key={item}> |
| | | <MkIcon type={item} /> |
| | | <Paragraph copyable={{ text: item }}>{item}</Paragraph> |
| | | </Col> |
| | | ))} |
| | | </Row> |
| | | </TabPane> |
| | | </Tabs> |
| | | </Modal> |
| | | <Modal |
| | |
| | | .ant-pagination { |
| | | text-align: right; |
| | | } |
| | | .icon-wrap { |
| | | text-align: center; |
| | | margin-bottom: 24px; |
| | | >.anticon { |
| | | font-size: 34px; |
| | | margin-bottom: 5px; |
| | | } |
| | | } |
| | | } |
| | | .picture-edit-model { |
| | | .ant-modal { |
| | |
| | | ) |
| | | } else if (card.eleType === 'icon') { |
| | | let val = '' |
| | | let icon = '' |
| | | let height = card.innerHeight |
| | | |
| | | if (card.datatype === 'dynamic') { |
| | | icon = data[card.field] || '' |
| | | } else { |
| | | icon = card.icon |
| | | } |
| | | |
| | | if (!height) { // 兼容 |
| | | let fontSize = 14 |
| | |
| | | height = fontSize * lineHeight |
| | | } |
| | | |
| | | if (card.datatype === 'static') { |
| | | if (data.hasOwnProperty(card.tooltip)) { |
| | | val = data[card.tooltip] |
| | | } else { |
| | | val = card.tooltip |
| | | } else if (data.hasOwnProperty(card.field)) { |
| | | val = data[card.field] |
| | | } |
| | | |
| | | contents.push( |
| | | <Col key={card.uuid} span={card.width}> |
| | | <div style={card.style}> |
| | | {val ? <Tooltip title={val}> |
| | | <MkIcon className="ant-mk-icon" style={{height: height}} type={card.icon}/> |
| | | </Tooltip> : <MkIcon className="ant-mk-icon" style={{height: height}} type={card.icon}/>} |
| | | <MkIcon className="ant-mk-icon" style={{height: height}} type={icon}/> |
| | | </Tooltip> : <MkIcon className="ant-mk-icon" style={{height: height}} type={icon}/>} |
| | | </div> |
| | | </Col> |
| | | ) |