From fa8f1b1320fd2ad21884ccd6df792bf88270e2a1 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期四, 06 七月 2023 18:13:51 +0800 Subject: [PATCH] 2023-07-06 --- src/components/tabview/index.jsx | 8 src/menu/components/table/normal-table/columns/editColumn/formconfig.jsx | 2 src/menu/components/calendar/board/index.scss | 40 + src/menu/components/group/paste/index.jsx | 2 src/menu/components/share/actioncomponent/dragaction/card.jsx | 6 src/menu/components/table/base-table/columns/editColumn/formconfig.jsx | 2 src/tabviews/custom/popview/index.jsx | 7 src/menu/components/tabs/tabcomponents/index.jsx | 1 src/tabviews/custom/components/calendar/board/index.jsx | 513 +++++++++++++++++++ src/tabviews/custom/components/calendar/index.jsx | 268 ++++++++++ src/tabviews/custom/components/calendar/index.scss | 38 + src/assets/css/main.scss | 16 src/menu/components/calendar/board/index.jsx | 288 ++++++++-- src/tabviews/custom/components/calendar/board/index.scss | 237 +++++++++ src/tabviews/custom/components/share/tabtransfer/index.jsx | 7 src/menu/components/share/actioncomponent/formconfig.jsx | 4 src/tabviews/custom/components/group/normal-group/index.jsx | 7 src/tabviews/custom/components/timeline/normal-timeline/index.jsx | 16 src/menu/pastecontroller/index.jsx | 2 src/menu/components/group/groupcomponents/card.jsx | 3 src/components/breadview/index.jsx | 8 src/menu/components/calendar/index.scss | 8 src/menu/components/share/actioncomponent/actionform/index.jsx | 1 src/tabviews/custom/index.jsx | 7 src/menu/components/tabs/tabcomponents/card.jsx | 3 src/menu/components/calendar/options.jsx | 3 src/menu/components/calendar/index.jsx | 42 + src/menu/components/tabs/paste/index.jsx | 2 28 files changed, 1,429 insertions(+), 112 deletions(-) diff --git a/src/assets/css/main.scss b/src/assets/css/main.scss index fca5df4..713b55b 100644 --- a/src/assets/css/main.scss +++ b/src/assets/css/main.scss @@ -519,4 +519,20 @@ .ant-dropdown-menu-item:hover, .ant-dropdown-menu-submenu-title:hover { background-color: var(--mk-sys-color1); } +} + +.ant-radio-group { + .ant-radio-button-wrapper.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) { + color: var(--mk-sys-color); + border-color: var(--mk-sys-color); + box-shadow: -1px 0 0 0 var(--mk-sys-color); + } + .ant-radio-button-wrapper.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover { + color: var(--mk-sys-color); + border-color: var(--mk-sys-color); + box-shadow: -1px 0 0 0 var(--mk-sys-color); + } + .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-checked):not(.ant-radio-button-wrapper-disabled):hover { + color: var(--mk-sys-color); + } } \ No newline at end of file diff --git a/src/components/breadview/index.jsx b/src/components/breadview/index.jsx index bc64507..29ae6c0 100644 --- a/src/components/breadview/index.jsx +++ b/src/components/breadview/index.jsx @@ -20,6 +20,8 @@ const RoleManage = asyncComponent(() => import('@/tabviews/rolemanage')) const FormTab = asyncComponent(() => import('@/tabviews/formtab')) +moment.locale('zh-cn') + class BreadView extends Component { state = { tabview: null, // 鏍囩 @@ -108,12 +110,6 @@ } UNSAFE_componentWillMount () { - if (!sessionStorage.getItem('lang') || sessionStorage.getItem('lang') === 'zh-CN') { - moment.locale('zh-cn') - } else { - moment.locale('en') - } - let home = { MenuID: 'home_page_id', MenuName: '棣栭〉', diff --git a/src/components/tabview/index.jsx b/src/components/tabview/index.jsx index 689faa5..991ce27 100644 --- a/src/components/tabview/index.jsx +++ b/src/components/tabview/index.jsx @@ -24,6 +24,8 @@ const FormTab = asyncComponent(() => import('@/tabviews/formtab')) const Calendar = asyncComponent(() => import('@/tabviews/calendar')) +moment.locale('zh-cn') + class TabViews extends Component { static propTpyes = { collapse: PropTypes.bool @@ -217,12 +219,6 @@ } UNSAFE_componentWillMount () { - if (!sessionStorage.getItem('lang') || sessionStorage.getItem('lang') === 'zh-CN') { - moment.locale('zh-cn') - } else { - moment.locale('en') - } - if (sessionStorage.getItem('isEditState') !== 'true') { this.setState({ activeId: 'home_page_id', diff --git a/src/menu/components/calendar/board/index.jsx b/src/menu/components/calendar/board/index.jsx index 5c1d5f5..4796157 100644 --- a/src/menu/components/calendar/board/index.jsx +++ b/src/menu/components/calendar/board/index.jsx @@ -1,12 +1,15 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Select, Radio, Row, Col, Badge } from 'antd' +import { Select, Radio, Row, Col } from 'antd' import moment from 'moment' +import 'moment/locale/zh-cn' import './index.scss' const { Option } = Select + +moment.locale('zh-cn') class CalendarBoard extends Component { static propTpyes = { @@ -31,7 +34,7 @@ let _selectYear = +this.state.selectYear yearlist.push(`${_selectYear}`) - for (let i = 1; i <= 50; i++) { + for (let i = 1; i <= 10; i++) { yearlist.unshift(`${_selectYear - i}`) yearlist.push(`${_selectYear + i}`) } @@ -40,11 +43,7 @@ let _levels = config.wrap.levels let level = _levels[0] - let monthlist = null - - if (_levels.includes('month')) { - monthlist = datelist.filter(item => item.month === moment().format('MM'))[0] - } + let monthlist = datelist.filter(item => item.month === moment().format('MM'))[0].children.filter(cell => !cell.children[0].$disable || !cell.children[6].$disable) this.setState({ yearlist, @@ -58,7 +57,8 @@ UNSAFE_componentWillReceiveProps(nextProps) { if (!is(fromJS(this.props.config.wrap), fromJS(nextProps.config.wrap))) { this.setState({ - levels: nextProps.config.wrap.levels + levels: nextProps.config.wrap.levels, + level: nextProps.config.wrap.levels[0] }) } } @@ -67,11 +67,7 @@ return !is(fromJS(this.state), fromJS(nextState)) } - getNongLi = (nyear, nmonth, nday) => { - let jq = this.getjq(nyear, nmonth, nday) - - if (jq) return jq - + getNongLi = (nyear, nmonth, nday, week) => { let lmonth; let lday; let lleap; //鍐滃巻鍙傛暟 @@ -180,11 +176,93 @@ lmonth = '闂�' + lmonth } - if (lday === '鍒濅竴') { - return lmonth + '鏈�' + lmonth = lmonth + '鏈�' + + if (!week) { + return lmonth + lday } - return lday + let jq = this.getjq(nyear, nmonth, nday) + + let nl = lday + + if (lday === '鍒濅竴') { + nl = lmonth + } + if (jq) { + nl = jq + } + + let sign = '鐝�' + if (week > 5) { + sign = '浼�' + } + + let jr = '' + let gr = '' + nmonth + '-' + nday + let nr = lmonth + lday + if (gr === '1-1') { + jr = '鍏冩棪' + sign = '浼�' + } else if (nr === '姝f湀鍒濅竴') { + jr = '鏄ヨ妭' + sign = '浼�' + } else if (nr === '姝f湀鍗佷簲') { + jr = '鍏冨鑺�' + } else if (jq === '娓呮槑') { + sign = '浼�' + } else if (gr === '3-8') { + jr = '濡囧コ鑺�' + } else if (gr === '5-1') { + jr = '鍔冲姩鑺�' + sign = '浼�' + } else if (nr === '浜旀湀鍒濅簲') { + jr = '绔崍鑺�' + sign = '浼�' + } else if (nr === '涓冩湀鍒濅竷') { + jr = '涓冨鑺�' + } else if (nr === '涓冩湀鍗佷簲') { + jr = '涓厓鑺�' + } else if (nr === '鍏湀鍗佷簲') { + jr = '涓鑺�' + sign = '浼�' + } else if (gr === '7-1') { + jr = '寤哄厷鑺�' + } else if (gr === '8-1') { + jr = '寤哄啗鑺�' + } else if (gr === '9-10') { + jr = '鏁欏笀鑺�' + } else if (gr === '10-1') { + jr = '鍥藉簡鑺�' + sign = '浼�' + } else if (nr === '涔濇湀鍒濅節') { + jr = '閲嶉槼鑺�' + } else if (nr === '鍗佷簩鏈堜笁鍗�') { + jr = '闄ゅ' + sign = '浼�' + } else if (['姝f湀鍒濅簩', '姝f湀鍒濅笁', '姝f湀鍒濆洓', '姝f湀鍒濅簲', '姝f湀鍒濆叚'].includes(nr)) { + sign = '浼�' + } else if (['10-2', '10-3'].includes(gr)) { + sign = '浼�' + } else if (nr === '鍗佷簩鏈堝豢涔�') { + let tis = moment(`${nyear}${nmonth < 10 ? '0' + nmonth : nmonth}${nday < 10 ? '0' + nday : nday}`, 'YYYYMMDD').add(1, 'days').format('YYYY-MM-DD').split('-') + let nd = this.getNongLi(+tis[0], +tis[1], +tis[2]) + + if (nd === '姝f湀鍒濅竴') { + jr = '闄ゅ' + sign = '浼�' + } + } + + return { + nlday: lday, + nlmonth: lmonth, + nljq: jq, + nl: nl, + jr: jr, + week: week, + sign: sign + } } getjq = (yyyy, mm, dd) => { @@ -207,22 +285,6 @@ return solarTerms } - getStyle = (item ) => { - if (!item || !item.color) return null - let style = {background: item.color} - - if (/rgb/ig.test(item.color)) { - try { - let colors = item.color.match(/\d+/g) - if ((colors[0] * 0.299 + colors[1] * 0.578 + colors[2] * 0.114) * colors[3] < 192) { - style.color = '#ffffff' - } - } catch (e) {} - } - - return style - } - getDateList = (selectYear) => { let datelist = [] let months = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'] @@ -232,43 +294,81 @@ } months.forEach(month => { - let _weeklist = [{week: 1, sublist: []}] + let _weeklist = [] let weekday = moment(`${selectYear}${month}01`, 'YYYYMMDD').weekday() let end = +moment(`${selectYear}${month}`, 'YYYYMM').endOf('month').format('DD') - for (let i = 0; i < weekday; i++) { - _weeklist[0].sublist.push(null) + let children = [] + if (weekday > 0) { + let times = moment(`${selectYear}${month}01`, 'YYYYMMDD').subtract(1, 'days').format('YYYY-MM-DD').split('-') + for (let i = 0; i < weekday; i++) { + let _day = times[2] - i + let nl = this.getNongLi(+times[0], +times[1], +_day, weekday - i) + + let item = { + day: _day, + time: times[0] + times[1] + _day, + label: _day, + subData: [], + $disable: true, + ...nl + } + children.unshift(item) + } } for (let i = 1; i <= end; i++) { let _day = i < 10 ? `0${i}` : `${i}` + let nl = this.getNongLi(+selectYear, +month, +_day, children.length + 1) let item = { day: _day, time: selectYear + month + _day, - nltime: this.getNongLi(+selectYear, +month, +_day), label: i, - subData: [] + subData: [], + ...nl } - if (_weeklist[_weeklist.length - 1].sublist.length < 7) { - _weeklist[_weeklist.length - 1].sublist.push(item) - } else { - let _week = {week: _weeklist.length + 1, sublist: [item]} - _weeklist.push(_week) + children.push(item) + + if (children.length === 7) { + _weeklist.push({ + children: [...children] + }) + children = [] } } - let re = 7 - _weeklist.slice(-1)[0].sublist.length - for (let i = 0; i < re; i++) { - _weeklist[_weeklist.length - 1].sublist.push(null) + let times = moment(`${selectYear}${month}`, 'YYYYMM').endOf('month').add(1, 'days').format('YYYY-MM-DD').split('-') + let tick = 42 - _weeklist.length * 7 - children.length + + for (let i = 1; i <= tick; i++) { + let _day = i < 10 ? '0' + i : i + let nl = this.getNongLi(+times[0], +times[1], +_day, children.length + 1) + + let item = { + day: _day, + time: times[0] + times[1] + _day, + label: i, + subData: [], + $disable: true, + ...nl + } + children.push(item) + + if (children.length === 7) { + _weeklist.push({ + children: [...children] + }) + children = [] + } } datelist.push({ month: month, time: selectYear + month, label: monthName[month], - sublist: _weeklist, + children: _weeklist, subData: [] }) }) @@ -281,20 +381,30 @@ } yearChange = (value) => { - const { levels, selectMonth } = this.state + const { selectMonth } = this.state let datelist = this.getDateList(value) - let monthlist = null - - if (levels.includes('month')) { - monthlist = datelist.filter(item => item.month === selectMonth)[0] - } + let monthlist = datelist.filter(item => item.month === selectMonth)[0].children.filter(cell => !cell.children[0].$disable || !cell.children[6].$disable) this.setState({ selectYear: value, datelist, monthlist }) } + monthChange = (value) => { + const { datelist, levels } = this.state + + if (!levels.includes('month')) { + return + } + + this.setState({ + level: 'month', + selectMonth: value, + monthlist: datelist.filter(item => item.month === value)[0].children.filter(cell => !cell.children[0].$disable || !cell.children[6].$disable) + }) + } + render() { - const { level, selectYear, yearlist, levels, datelist, monthlist } = this.state - const _levelName = {day: '鏃�', month: '鏈�'} + const { level, selectYear, selectMonth, yearlist, levels, datelist, monthlist } = this.state + const _levelName = {day: '鏃�', month: '鏈�', year: '骞�'} return ( <div className="mk-calendar"> @@ -302,6 +412,20 @@ <Select value={selectYear} onChange={this.yearChange}> {yearlist.map(item => (<Option key={item} value={item}>{item}骞�</Option>))} </Select> + {level === 'month' ? <Select value={selectMonth} onChange={this.monthChange}> + <Option value="01">1鏈�</Option> + <Option value="02">2鏈�</Option> + <Option value="03">3鏈�</Option> + <Option value="04">4鏈�</Option> + <Option value="05">5鏈�</Option> + <Option value="06">6鏈�</Option> + <Option value="07">7鏈�</Option> + <Option value="08">8鏈�</Option> + <Option value="09">9鏈�</Option> + <Option value="10">10鏈�</Option> + <Option value="11">11鏈�</Option> + <Option value="12">12鏈�</Option> + </Select> : null} {levels.length > 1 ? <Radio.Group value={level} onChange={this.levelChange}> {levels.map(item => (<Radio.Button key={item} value={item}>{_levelName[item]}</Radio.Button>))} </Radio.Group> : null} @@ -320,13 +444,13 @@ </tr> </thead> <tbody> - {item.sublist.map(cell => ( - <tr key={cell.week}> - {cell.sublist.map((d, i) => ( + {item.children.map((cell, m) => ( + <tr key={m}> + {cell.children.map((d, i) => ( <td key={i}> - {d ? <div className="day-wrap" style={d.style || null}> + <div className={'day-wrap' + (d.$disable ? ' disabled' : '')}> {d.label} - </div> : null } + </div> </td> ))} </tr> @@ -336,20 +460,46 @@ </Col> ))} </Row> : null} - {level === 'month' && monthlist ? <Row className="year-calendar"> + {level === 'month' && monthlist ? <div className="month-calendar"> + <table> + <thead> + <tr> + <th>鏄熸湡涓�</th><th>鏄熸湡浜�</th><th>鏄熸湡涓�</th><th>鏄熸湡鍥�</th><th>鏄熸湡浜�</th><th>鏄熸湡鍏�</th><th>鏄熸湡鏃�</th> + </tr> + </thead> + <tbody> + {monthlist.map((cell, m) => ( + <tr key={m}> + {cell.children.map((d, i) => ( + <td key={i}> + <div className={'month-wrap' + (d.$disable ? ' disabled' : '')}> + <div className="header"> + <div className="message"> + {d.label} + <span className={'right' + (d.sign === '浼�' ? ' danger' : '')}>{d.sign}</span> + </div> + <div className="message"> + {d.nl} + <span className="right">{d.jr}</span> + </div> + </div> + <ul className="content"></ul> + </div> + </td> + ))} + </tr> + ))} + </tbody> + </table> + </div>: null} + {level === 'year' ? <Row className="year-calendar"> {datelist.map(item => ( <Col span={8} key={item.month}> - <div className="year-wrap" style={item.style || null}> - <div className="header" style={item.style ? null : {color: '#1890ff'}}> + <div className="year-wrap"> + <div className="header" style={{color: '#1890ff'}}> {item.label} </div> - <ul className="content"> - {item.subData.map((data, index) => ( - <li key={index} className="message"> - <Badge color={item.style ? (data.color === item.style.background ? '#ffffff' : data.color) : data.color} text={`${data.remark} (${data.startTime} ~ ${data.endTime})`}/> - </li> - ))} - </ul> + <ul className="content"></ul> </div> </Col> ))} diff --git a/src/menu/components/calendar/board/index.scss b/src/menu/components/calendar/board/index.scss index 52faea5..a81b171 100644 --- a/src/menu/components/calendar/board/index.scss +++ b/src/menu/components/calendar/board/index.scss @@ -2,6 +2,7 @@ position: relative; width: 100%; padding: 20px; + color: rgba(0, 0, 0, 0.85); .loading-data { position: absolute; @@ -23,6 +24,9 @@ .ant-select { width: 90px; margin-right: 15px; + } + .ant-select + .ant-select { + width: 80px; } } .mk-calendar-content { @@ -58,7 +62,11 @@ height: 100%; } } - .day-wrap:hover { + .day-wrap.disabled { + cursor: default; + color: rgba(0, 0, 0, 0.35); + } + .day-wrap:not(.disabled):hover { background: #bae7ff; } } @@ -71,7 +79,7 @@ width: 100%; thead { text-align: center; - color: #1890ff; + // color: #1890ff; font-size: 16px; tr { height: 35px; @@ -90,12 +98,21 @@ margin-bottom: 2px; box-shadow: 0px 0px 3px #bae7ff; .header { - text-align: center; font-size: 16px; + padding: 5px 10px; + + .message { + .right { + float: right; + } + .right.danger { + color: #ff4d4f; + } + } } .content { padding: 0 10px 10px; - height: 90px; + height: 70px; overflow-y: auto; position: absolute; left: 0; @@ -122,7 +139,20 @@ background: rgba(0, 0, 0, 0); } } - .month-wrap:hover { + + .month-wrap.disabled { + cursor: default; + color: rgba(0, 0, 0, 0.35); + .header { + .message { + .right.danger { + color: rgba(0, 0, 0, 0.35); + } + } + } + } + + .month-wrap:not(.disabled):hover { background: #e6f7ff; } } diff --git a/src/menu/components/calendar/index.jsx b/src/menu/components/calendar/index.jsx index 8338dbb..e4bf1fb 100644 --- a/src/menu/components/calendar/index.jsx +++ b/src/menu/components/calendar/index.jsx @@ -15,6 +15,7 @@ const SettingComponent = asyncIconComponent(() => import('@/menu/datasource')) const NormalForm = asyncIconComponent(() => import('@/components/normalform')) const SearchComponent = asyncComponent(() => import('@/templates/sharecomponent/searchcomponent')) +const ActionComponent = asyncComponent(() => import('@/menu/components/share/actioncomponent')) const CopyComponent = asyncIconComponent(() => import('@/menu/components/share/copycomponent')) const NormalHeader = asyncComponent(() => import('@/menu/components/share/normalheader')) const CalendarBoard = asyncComponent(() => import('./board')) @@ -34,6 +35,7 @@ const { card } = this.props if (card.isNew) { + let btnId = Utils.getuuid() let _card = { uuid: card.uuid, type: card.type, @@ -44,12 +46,40 @@ name: card.name, subtype: card.subtype, setting: { interType: 'system' }, - wrap: { title: '', name: card.name, width: card.width || 24, levels: ['day', 'month'] }, + wrap: { title: '', name: card.name, width: card.width || 24, levels: ['day', 'month', 'year'] }, style: { marginLeft: '0px', marginRight: '0px', marginTop: '0px', marginBottom: '0px' }, headerStyle: { fontSize: '16px', borderBottomWidth: '1px', borderBottomColor: '#e8e8e8' }, search: [], columns: [], scripts: [], + action: [{ + $fixed: true, + uuid: btnId, + label: '娣诲姞', + OpenType: 'popview', + popClose: 'grid', + display: 'modal', + icon: '', + class: 'green', + ratio: 85, + style: { + color: 'rgb(255, 255, 255)', + background: 'rgb(38, 194, 129)', + marginRight: '15px' + }, + config: { + uuid: btnId, + MenuID: btnId, + ParentId: card.uuid, + enabled: false, + MenuName: '娣诲姞', + tables: [], + Template: 'CustomPage', + components: [], + viewType: 'popview', + style: { backgroundColor: '#ffffff', paddingTop: '16px', paddingBottom: '40px', paddingLeft: '16px', paddingRight: '16px' } + } + }] } if (card.config) { @@ -164,6 +194,15 @@ this.updateComponent({...card, wrap: res}) } + setSubConfig = (item) => { + const { card } = this.state + let btn = fromJS(item).toJS() + + if (btn.OpenType === 'popview') { + MKEmitter.emit('changePopview', card, btn) + } + } + render() { const { card } = this.state @@ -187,6 +226,7 @@ <ToolOutlined /> </Popover> <SearchComponent config={card} updatesearch={this.updateComponent}/> + <ActionComponent config={card} setSubConfig={this.setSubConfig} updateaction={this.updateComponent}/> <CalendarBoard config={card} /> <div className="component-name"> <div className="center"> diff --git a/src/menu/components/calendar/index.scss b/src/menu/components/calendar/index.scss index a245819..b110ec4 100644 --- a/src/menu/components/calendar/index.scss +++ b/src/menu/components/calendar/index.scss @@ -54,6 +54,14 @@ } } + .model-menu-action-list { + .page-card { + position: absolute; + top: 20px; + z-index: 1; + } + } + >.anticon-tool { position: absolute; z-index: 2; diff --git a/src/menu/components/calendar/options.jsx b/src/menu/components/calendar/options.jsx index c4504d7..56d1e4f 100644 --- a/src/menu/components/calendar/options.jsx +++ b/src/menu/components/calendar/options.jsx @@ -61,8 +61,9 @@ initval: wrap.levels || [], required: true, options: [ - {value: 'day', label: '澶�'}, + {value: 'day', label: '鏃�'}, {value: 'month', label: '鏈�'}, + {value: 'year', label: '骞�'}, ] }, { diff --git a/src/menu/components/group/groupcomponents/card.jsx b/src/menu/components/group/groupcomponents/card.jsx index 1ad8d52..ca3302b 100644 --- a/src/menu/components/group/groupcomponents/card.jsx +++ b/src/menu/components/group/groupcomponents/card.jsx @@ -27,6 +27,7 @@ const AntvG6 = asyncComponent(() => import('@/menu/components/chart/antv-G6')) const AntvX6 = asyncComponent(() => import('@/menu/components/chart/antv-X6')) const DoubleDataCard = asyncComponent(() => import('@/menu/components/card/double-data-card')) +const Calendar = asyncComponent(() => import('@/menu/components/calendar')) const Card = ({ id, card, moveCard, findCard, delCard, updateConfig }) => { const originalIndex = findCard(id).index @@ -112,6 +113,8 @@ return (<AntvG6 card={card} updateConfig={updateConfig} deletecomponent={delCard}/>) } else if (card.type === 'antvX6') { return (<AntvX6 card={card} updateConfig={updateConfig} deletecomponent={delCard}/>) + } else if (card.type === 'calendar') { + return (<Calendar card={card} updateConfig={updateConfig} deletecomponent={delCard}/>) } } diff --git a/src/menu/components/group/paste/index.jsx b/src/menu/components/group/paste/index.jsx index 2660dd7..fb491f3 100644 --- a/src/menu/components/group/paste/index.jsx +++ b/src/menu/components/group/paste/index.jsx @@ -33,7 +33,7 @@ } if (appType !== 'mob') { - options.push('editable', 'antvG6', 'antvX6', 'tree', 'dashboard', 'chart') + options.push('editable', 'antvG6', 'antvX6', 'calendar', 'tree', 'dashboard', 'chart') } this.pasteFormRef.handleConfirm().then(res => { diff --git a/src/menu/components/share/actioncomponent/actionform/index.jsx b/src/menu/components/share/actioncomponent/actionform/index.jsx index c57b171..5a87254 100644 --- a/src/menu/components/share/actioncomponent/actionform/index.jsx +++ b/src/menu/components/share/actioncomponent/actionform/index.jsx @@ -964,6 +964,7 @@ values.verify = card.verify || null values.modal = card.modal || null values.config = card.config || null + values.$fixed = card.$fixed || false if (card.OpenType === 'excelOut' && values.OpenType === 'excelIn') { if (values.verify && values.verify.columns && values.verify.columns.length > 0) { diff --git a/src/menu/components/share/actioncomponent/dragaction/card.jsx b/src/menu/components/share/actioncomponent/dragaction/card.jsx index 4735517..a90472c 100644 --- a/src/menu/components/share/actioncomponent/dragaction/card.jsx +++ b/src/menu/components/share/actioncomponent/dragaction/card.jsx @@ -106,9 +106,9 @@ <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> <EditOutlined className="edit" onClick={() => editCard(id)} /> - <CopyOutlined className="copy" onClick={() => copyCard(id)} /> - <CloseOutlined className="close" onClick={() => delCard(id)} /> - {type !== 'datacard' && type !== 'basetable' ? <FontColorsOutlined className="style" title="璋冩暣鏍峰紡" onClick={() => changeStyle(id)}/> : ''} + {!card.$fixed ? <CopyOutlined className="copy" onClick={() => copyCard(id)} /> : null} + {!card.$fixed ? <CloseOutlined className="close" onClick={() => delCard(id)} /> : null} + {type !== 'datacard' && type !== 'basetable' && !card.$fixed ? <FontColorsOutlined className="style" title="璋冩暣鏍峰紡" onClick={() => changeStyle(id)}/> : ''} {hasProfile ? <ProfileOutlined className="profile" title="楠岃瘉" onClick={() => profileCard(id)} /> : null} {updateTime} </div> diff --git a/src/menu/components/share/actioncomponent/formconfig.jsx b/src/menu/components/share/actioncomponent/formconfig.jsx index 550b969..30d6719 100644 --- a/src/menu/components/share/actioncomponent/formconfig.jsx +++ b/src/menu/components/share/actioncomponent/formconfig.jsx @@ -165,6 +165,10 @@ } } + if (card.$fixed) { + opentypes = opentypes.filter(item => item.value === card.OpenType) + } + if (card.funcType === 'changeuser') { // 鍘熺被鍨嬫敮鎸� funTypes.unshift({ value: 'changeuser', text: '鍒囨崲鐢ㄦ埛' }) } diff --git a/src/menu/components/table/base-table/columns/editColumn/formconfig.jsx b/src/menu/components/table/base-table/columns/editColumn/formconfig.jsx index e139d76..f550a1c 100644 --- a/src/menu/components/table/base-table/columns/editColumn/formconfig.jsx +++ b/src/menu/components/table/base-table/columns/editColumn/formconfig.jsx @@ -239,7 +239,7 @@ value: 'false', text: '鍚�' }], - forbid: card.isSub + forbid: card.isSub || card.sum !== 'true' }, { type: 'number', diff --git a/src/menu/components/table/normal-table/columns/editColumn/formconfig.jsx b/src/menu/components/table/normal-table/columns/editColumn/formconfig.jsx index e4c73d2..0057faf 100644 --- a/src/menu/components/table/normal-table/columns/editColumn/formconfig.jsx +++ b/src/menu/components/table/normal-table/columns/editColumn/formconfig.jsx @@ -231,7 +231,7 @@ value: 'false', text: '鍚�' }], - forbid: card.isSub + forbid: card.isSub || card.sum !== 'true' }, { type: 'number', diff --git a/src/menu/components/tabs/paste/index.jsx b/src/menu/components/tabs/paste/index.jsx index be4a281..733653d 100644 --- a/src/menu/components/tabs/paste/index.jsx +++ b/src/menu/components/tabs/paste/index.jsx @@ -63,7 +63,7 @@ if (appType === 'mob') { options.push('menubar') } else { - options.push('editable', 'antvG6', 'antvX6', 'tree', 'dashboard', 'chart') + options.push('editable', 'antvG6', 'antvX6', 'calendar', 'tree', 'dashboard', 'chart') } this.pasteFormRef.handleConfirm().then(res => { diff --git a/src/menu/components/tabs/tabcomponents/card.jsx b/src/menu/components/tabs/tabcomponents/card.jsx index 74f3bf9..248e0a7 100644 --- a/src/menu/components/tabs/tabcomponents/card.jsx +++ b/src/menu/components/tabs/tabcomponents/card.jsx @@ -30,6 +30,7 @@ const AntvG6 = asyncComponent(() => import('@/menu/components/chart/antv-G6')) const AntvX6 = asyncComponent(() => import('@/menu/components/chart/antv-X6')) const DoubleDataCard = asyncComponent(() => import('@/menu/components/card/double-data-card')) +const Calendar = asyncComponent(() => import('@/menu/components/calendar')) const Card = ({ id, card, moveCard, findCard, delCard, unGroup, updateConfig }) => { const originalIndex = findCard(id).index @@ -121,6 +122,8 @@ return (<AntvG6 card={card} updateConfig={updateConfig} deletecomponent={delCard}/>) } else if (card.type === 'antvX6') { return (<AntvX6 card={card} updateConfig={updateConfig} deletecomponent={delCard}/>) + } else if (card.type === 'calendar') { + return (<Calendar card={card} updateConfig={updateConfig} deletecomponent={delCard}/>) } } diff --git a/src/menu/components/tabs/tabcomponents/index.jsx b/src/menu/components/tabs/tabcomponents/index.jsx index 62b0ac4..8f345f6 100644 --- a/src/menu/components/tabs/tabcomponents/index.jsx +++ b/src/menu/components/tabs/tabcomponents/index.jsx @@ -118,6 +118,7 @@ timeline: '鏃堕棿杞�', antvG6: '鏍戝浘', antvX6: '娴佺▼鍥�', + calendar: '鏃ュ巻', card: '鍗$墖' } let i = 1 diff --git a/src/menu/pastecontroller/index.jsx b/src/menu/pastecontroller/index.jsx index a39a3fb..70094e6 100644 --- a/src/menu/pastecontroller/index.jsx +++ b/src/menu/pastecontroller/index.jsx @@ -63,7 +63,7 @@ options.push('menubar', 'singleSearch') } } else { - options.push('editable', 'mainsearch', 'antvG6', 'antvX6', 'tree', 'dashboard', 'chart') + options.push('editable', 'mainsearch', 'antvG6', 'antvX6', 'calendar', 'tree', 'dashboard', 'chart') } this.pasteFormRef.handleConfirm().then(res => { diff --git a/src/tabviews/custom/components/calendar/board/index.jsx b/src/tabviews/custom/components/calendar/board/index.jsx new file mode 100644 index 0000000..911cc2d --- /dev/null +++ b/src/tabviews/custom/components/calendar/board/index.jsx @@ -0,0 +1,513 @@ +import React, {Component} from 'react' +import PropTypes from 'prop-types' +import { is, fromJS } from 'immutable' +import { Select, Radio, Row, Col } from 'antd' +import moment from 'moment' +import 'moment/locale/zh-cn' + +import './index.scss' + +const { Option } = Select + +moment.locale('zh-cn') + +class CalendarBoard extends Component { + static propTpyes = { + data: PropTypes.any, // 浜嬩欢鏁版嵁 + config: PropTypes.any + } + + state = { + level: 'day', + levels: null, + yearlist: null, + selectYear: moment().format('YYYY'), + selectMonth: moment().format('MM'), + datelist: null, + monthlist: null + } + + UNSAFE_componentWillMount() { + const { config } = this.props + + let yearlist = [] + let _selectYear = +this.state.selectYear + yearlist.push(`${_selectYear}`) + + for (let i = 1; i <= 10; i++) { + yearlist.unshift(`${_selectYear - i}`) + yearlist.push(`${_selectYear + i}`) + } + + let datelist = this.getDateList(this.state.selectYear) + + let _levels = config.wrap.levels + let level = _levels[0] + let monthlist = datelist.filter(item => item.month === moment().format('MM'))[0].children.filter(cell => !cell.children[0].$disable || !cell.children[6].$disable) + + this.setState({ + yearlist, + datelist, + monthlist, + level, + levels: _levels + }) + } + + UNSAFE_componentWillReceiveProps(nextProps) { + if (!is(fromJS(this.props.config.wrap), fromJS(nextProps.config.wrap))) { + this.setState({ + levels: nextProps.config.wrap.levels, + level: nextProps.config.wrap.levels[0] + }) + } + } + + shouldComponentUpdate (nextProps, nextState) { + return !is(fromJS(this.state), fromJS(nextState)) + } + + getNongLi = (nyear, nmonth, nday, week) => { + let lmonth; + let lday; + let lleap; //鍐滃巻鍙傛暟 + + //闃村巻鍑芥暟寮�濮� + // eslint-disable-next-line + let lunarInfo = new Array(0x04bd8, 0x04ae0, 0x0a570, 0x054d5, 0x0d260, 0x0d950, 0x16554, 0x056a0, 0x09ad0, 0x055d2, 0x04ae0, 0x0a5b6, 0x0a4d0, 0x0d250, 0x1d255, 0x0b540, 0x0d6a0, 0x0ada2, 0x095b0, 0x14977, 0x04970, 0x0a4b0, 0x0b4b5, 0x06a50, 0x06d40, 0x1ab54, 0x02b60, 0x09570, 0x052f2, 0x04970, 0x06566, 0x0d4a0, 0x0ea50, 0x06e95, 0x05ad0, 0x02b60, 0x186e3, 0x092e0, 0x1c8d7, 0x0c950, 0x0d4a0, 0x1d8a6, 0x0b550, 0x056a0, 0x1a5b4, 0x025d0, 0x092d0, 0x0d2b2, 0x0a950, 0x0b557, 0x06ca0, 0x0b550, 0x15355, 0x04da0, 0x0a5b0, 0x14573, 0x052b0, 0x0a9a8, 0x0e950, 0x06aa0, 0x0aea6, 0x0ab50, 0x04b60, 0x0aae4, 0x0a570, 0x05260, 0x0f263, 0x0d950, 0x05b57, 0x056a0, 0x096d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x0d4d4, 0x0d250, 0x0d558, 0x0b540, 0x0b6a0, 0x195a6, 0x095b0, 0x049b0, 0x0a974, 0x0a4b0, 0x0b27a, 0x06a50, 0x06d40, 0x0af46, 0x0ab60, 0x09570, 0x04af5, 0x04970, 0x064b0, 0x074a3, 0x0ea50, 0x06b58, 0x05ac0, 0x0ab60, 0x096d5, 0x092e0, + 0x0c960, 0x0d954, 0x0d4a0, 0x0da50, 0x07552, 0x056a0, 0x0abb7, 0x025d0, 0x092d0, 0x0cab5, 0x0a950, 0x0b4a0, 0x0baa4, 0x0ad50, 0x055d9, 0x04ba0, 0x0a5b0, 0x15176, 0x052b0, 0x0a930, 0x07954, 0x06aa0, 0x0ad50, 0x05b52, 0x04b60, 0x0a6e6, 0x0a4e0, 0x0d260, 0x0ea65, 0x0d530, 0x05aa0, 0x076a3, 0x096d0, 0x04bd7, 0x04ad0, 0x0a4d0, 0x1d0b6, 0x0d250, 0x0d520, 0x0dd45, 0x0b5a0, 0x056d0, 0x055b2, 0x049b0, 0x0a577, 0x0a4b0, 0x0aa50, 0x1b255, 0x06d20, 0x0ada0, 0x14b63) + let lYearDays = (y) => { + let i, sum = 348; + for (i = 0x8000; i > 0x8; i >>= 1) { + sum += (lunarInfo[y - 1900] & i) ? 1 : 0 + } + return (sum + leapDays(y)) + } + let leapDays = (y) => { + if (leapMonth(y)) return ((lunarInfo[y - 1900] & 0x10000) ? 30 : 29) + return 0 + } + let leapMonth = (y) => { + return (lunarInfo[y - 1900] & 0xf) + } + let monthDays = (y, m) => { + return ((lunarInfo[y - 1900] & (0x10000 >> m)) ? 30 : 29) + } + let Lunar = (y, m, d) => { + let i, leap = 0, temp = 0; + let offset = (Date.UTC(y, m, d) - Date.UTC(1900, 0, 31)) / 86400000; + for (i = 1900; i < 2050 && offset > 0; i++) { + temp = lYearDays(i) + offset -= temp + } + if (offset < 0) { + offset += temp + i-- + } + + let year = i + leap = leapMonth(i) + let isLeap = false + + for (i = 1; i < 13 && offset > 0; i++) { + if (leap > 0 && i === (leap + 1) && isLeap === false) { + --i + isLeap = true + temp = leapDays(year) + } else { + temp = monthDays(year, i) + } + if (isLeap === true && i === (leap + 1)) { + isLeap = false + } + offset -= temp + } + if (offset === 0 && leap > 0 && i === leap + 1) { + if (isLeap) { + isLeap = false + } else { + isLeap = true + --i + } + } + if (offset < 0) { + offset += temp + --i + } + + return { + month: i, + day: offset + 1, + isLeap: isLeap + } + } + + let nStr1 = ['', '涓�', '浜�', '涓�', '鍥�', '浜�', '鍏�', '涓�', '鍏�', '涔�', '鍗�', '鍗佷竴', '鍗佷簩'] + let nStr2 = ['鍒�', '鍗�', '寤�', '鍗�'] + let GetcDay = (d) => { + let s + switch (d) { + case 10: + s = '鍒濆崄' + break + case 20: + s = '浜屽崄' + break + case 30: + s = '涓夊崄' + break + default: + s = nStr2[Math.floor(d / 10)] + s += nStr1[d % 10] + break + } + return s + } + let GetcMon = (m) => { + if (m === 1) return '姝�' + return nStr1[m] + } + + let lObj = Lunar(nyear, nmonth - 1, nday) + lmonth = GetcMon(lObj.month) + lday = GetcDay(lObj.day) + lleap = lObj.isLeap + if (lleap === 1) { + lmonth = '闂�' + lmonth + } + + lmonth = lmonth + '鏈�' + + if (!week) { + return lmonth + lday + } + + let jq = this.getjq(nyear, nmonth, nday) + + let nl = lday + + if (lday === '鍒濅竴') { + nl = lmonth + } + if (jq) { + nl = jq + } + + let sign = '鐝�' + if (week > 5) { + sign = '浼�' + } + + let jr = '' + let gr = '' + nmonth + '-' + nday + let nr = lmonth + lday + if (gr === '1-1') { + jr = '鍏冩棪' + sign = '浼�' + } else if (nr === '姝f湀鍒濅竴') { + jr = '鏄ヨ妭' + sign = '浼�' + } else if (nr === '姝f湀鍗佷簲') { + jr = '鍏冨鑺�' + } else if (jq === '娓呮槑') { + sign = '浼�' + } else if (gr === '3-8') { + jr = '濡囧コ鑺�' + } else if (gr === '5-1') { + jr = '鍔冲姩鑺�' + sign = '浼�' + } else if (nr === '浜旀湀鍒濅簲') { + jr = '绔崍鑺�' + sign = '浼�' + } else if (nr === '涓冩湀鍒濅竷') { + jr = '涓冨鑺�' + } else if (nr === '涓冩湀鍗佷簲') { + jr = '涓厓鑺�' + } else if (nr === '鍏湀鍗佷簲') { + jr = '涓鑺�' + sign = '浼�' + } else if (gr === '7-1') { + jr = '寤哄厷鑺�' + } else if (gr === '8-1') { + jr = '寤哄啗鑺�' + } else if (gr === '9-10') { + jr = '鏁欏笀鑺�' + } else if (gr === '10-1') { + jr = '鍥藉簡鑺�' + sign = '浼�' + } else if (nr === '涔濇湀鍒濅節') { + jr = '閲嶉槼鑺�' + } else if (nr === '鍗佷簩鏈堜笁鍗�') { + jr = '闄ゅ' + sign = '浼�' + } else if (['姝f湀鍒濅簩', '姝f湀鍒濅笁', '姝f湀鍒濆洓', '姝f湀鍒濅簲', '姝f湀鍒濆叚'].includes(nr)) { + sign = '浼�' + } else if (['10-2', '10-3'].includes(gr)) { + sign = '浼�' + } else if (nr === '鍗佷簩鏈堝豢涔�') { + let tis = moment(`${nyear}${nmonth < 10 ? '0' + nmonth : nmonth}${nday < 10 ? '0' + nday : nday}`, 'YYYYMMDD').add(1, 'days').format('YYYY-MM-DD').split('-') + let nd = this.getNongLi(+tis[0], +tis[1], +tis[2]) + + if (nd === '姝f湀鍒濅竴') { + jr = '闄ゅ' + sign = '浼�' + } + } + + return { + nlday: lday, + nlmonth: lmonth, + nljq: jq, + nl: nl, + jr: jr, + week: week, + sign: sign + } + } + + getjq = (yyyy, mm, dd) => { + mm = mm - 1 + // eslint-disable-next-line + let sTermInfo = new Array(0,21208,42467,63836,85337,107014,128867,150921,173149,195551,218072,240693,263343,285989,308563,331033,353350,375494,397447,419210,440795,462224,483532,504758) + let solarTerm = ['灏忓瘨', '澶у瘨', '绔嬫槬', '闆ㄦ按', '鎯婅洶', '鏄ュ垎', '娓呮槑', '璋烽洦', '绔嬪', '灏忔弧', '鑺掔', '澶忚嚦', '灏忔殤', '澶ф殤', '绔嬬', '澶勬殤', '鐧介湶', '绉嬪垎', '瀵掗湶', '闇滈檷', '绔嬪啲', '灏忛洩', '澶ч洩', '鍐嚦'] + let tmp1 = new Date((31556925974.7 * (yyyy - 1900) + sTermInfo[mm * 2 + 1] * 60000) + Date.UTC(1900, 0, 6, 2, 5)) + let tmp2 = tmp1.getUTCDate() + let solarTerms = '' + if (tmp2 === dd) { + solarTerms = solarTerm[mm * 2 + 1] + } + tmp1 = new Date((31556925974.7 * (yyyy - 1900) + sTermInfo[mm * 2] * 60000) + Date.UTC(1900, 0, 6, 2, 5)) + tmp2= tmp1.getUTCDate() + if (tmp2 === dd) { + solarTerms = solarTerm[mm * 2] + } + + return solarTerms + } + + getDateList = (selectYear) => { + let datelist = [] + let months = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'] + let monthName = { + '01': '涓�鏈�', '02': '浜屾湀', '03': '涓夋湀', '04': '鍥涙湀', '05': '浜旀湀', '06': '鍏湀', + '07': '涓冩湀', '08': '鍏湀', '09': '涔濇湀', '10': '鍗佹湀', '11': '鍗佷竴鏈�', '12': '鍗佷簩鏈�' + } + + months.forEach(month => { + let _weeklist = [] + let weekday = moment(`${selectYear}${month}01`, 'YYYYMMDD').weekday() + let end = +moment(`${selectYear}${month}`, 'YYYYMM').endOf('month').format('DD') + + let children = [] + if (weekday > 0) { + let times = moment(`${selectYear}${month}01`, 'YYYYMMDD').subtract(1, 'days').format('YYYY-MM-DD').split('-') + for (let i = 0; i < weekday; i++) { + let _day = times[2] - i + let nl = this.getNongLi(+times[0], +times[1], +_day, weekday - i) + + let item = { + day: _day, + time: times[0] + times[1] + _day, + label: _day, + subData: [], + $disable: true, + ...nl + } + children.unshift(item) + } + } + + for (let i = 1; i <= end; i++) { + let _day = i < 10 ? `0${i}` : `${i}` + let nl = this.getNongLi(+selectYear, +month, +_day, children.length + 1) + + let item = { + day: _day, + time: selectYear + month + _day, + label: i, + subData: [], + ...nl + } + + children.push(item) + + if (children.length === 7) { + _weeklist.push({ + children: [...children] + }) + children = [] + } + } + + let times = moment(`${selectYear}${month}`, 'YYYYMM').endOf('month').add(1, 'days').format('YYYY-MM-DD').split('-') + let tick = 42 - _weeklist.length * 7 - children.length + + for (let i = 1; i <= tick; i++) { + let _day = i < 10 ? '0' + i : i + let nl = this.getNongLi(+times[0], +times[1], +_day, children.length + 1) + + let item = { + day: _day, + time: times[0] + times[1] + _day, + label: i, + subData: [], + $disable: true, + ...nl + } + children.push(item) + + if (children.length === 7) { + _weeklist.push({ + children: [...children] + }) + children = [] + } + } + + datelist.push({ + month: month, + time: selectYear + month, + label: monthName[month], + children: _weeklist, + subData: [] + }) + }) + + return datelist + } + + levelChange = (e) => { + this.setState({ level: e.target.value }) + } + + yearChange = (value) => { + const { selectMonth } = this.state + let datelist = this.getDateList(value) + let monthlist = datelist.filter(item => item.month === selectMonth)[0].children.filter(cell => !cell.children[0].$disable || !cell.children[6].$disable) + + this.setState({ selectYear: value, datelist, monthlist }) + } + + monthChange = (value) => { + const { datelist, levels } = this.state + + if (!levels.includes('month')) { + return + } + + this.setState({ + level: 'month', + selectMonth: value, + monthlist: datelist.filter(item => item.month === value)[0].children.filter(cell => !cell.children[0].$disable || !cell.children[6].$disable) + }) + } + + render() { + const { level, selectYear, selectMonth, yearlist, levels, datelist, monthlist } = this.state + const _levelName = {day: '鏃�', month: '鏈�', year: '骞�'} + + return ( + <div className="mk-calendar"> + <div className="mk-calendar-control"> + <Select value={selectYear} onChange={this.yearChange}> + {yearlist.map(item => (<Option key={item} value={item}>{item}骞�</Option>))} + </Select> + {level === 'month' ? <Select value={selectMonth} onChange={this.monthChange}> + <Option value="01">1鏈�</Option> + <Option value="02">2鏈�</Option> + <Option value="03">3鏈�</Option> + <Option value="04">4鏈�</Option> + <Option value="05">5鏈�</Option> + <Option value="06">6鏈�</Option> + <Option value="07">7鏈�</Option> + <Option value="08">8鏈�</Option> + <Option value="09">9鏈�</Option> + <Option value="10">10鏈�</Option> + <Option value="11">11鏈�</Option> + <Option value="12">12鏈�</Option> + </Select> : null} + {levels.length > 1 ? <Radio.Group value={level} onChange={this.levelChange}> + {levels.map(item => (<Radio.Button key={item} value={item}>{_levelName[item]}</Radio.Button>))} + </Radio.Group> : null} + </div> + <div className="mk-calendar-content"> + {level === 'day' ? <Row className="day-calendar" gutter={16}> + {datelist.map(item => ( + <Col span={4} key={item.month}> + <table> + <thead> + <tr> + <th colSpan="7">{item.label}</th> + </tr> + <tr> + <th>涓�</th><th>浜�</th><th>涓�</th><th>鍥�</th><th>浜�</th><th>鍏�</th><th>鏃�</th> + </tr> + </thead> + <tbody> + {item.children.map((cell, m) => ( + <tr key={m}> + {cell.children.map((d, i) => ( + <td key={i}> + <div className={'day-wrap' + (d.$disable ? ' disabled' : '')}> + {d.label} + </div> + </td> + ))} + </tr> + ))} + </tbody> + </table> + </Col> + ))} + </Row> : null} + {level === 'month' && monthlist ? <div className="month-calendar"> + <table> + <thead> + <tr> + <th>鏄熸湡涓�</th><th>鏄熸湡浜�</th><th>鏄熸湡涓�</th><th>鏄熸湡鍥�</th><th>鏄熸湡浜�</th><th>鏄熸湡鍏�</th><th>鏄熸湡鏃�</th> + </tr> + </thead> + <tbody> + {monthlist.map((cell, m) => ( + <tr key={m}> + {cell.children.map((d, i) => ( + <td key={i}> + <div className={'month-wrap' + (d.$disable ? ' disabled' : '')}> + <div className="header"> + <div className="message"> + {d.label} + <span className={'right' + (d.sign === '浼�' ? ' danger' : '')}>{d.sign}</span> + </div> + <div className="message"> + {d.nl} + <span className="right">{d.jr}</span> + </div> + </div> + <ul className="content"></ul> + </div> + </td> + ))} + </tr> + ))} + </tbody> + </table> + </div>: null} + {level === 'year' ? <Row className="year-calendar"> + {datelist.map(item => ( + <Col span={8} key={item.month}> + <div className="year-wrap"> + <div className="header"> + {item.label} + </div> + <ul className="content"></ul> + </div> + </Col> + ))} + </Row>: null} + </div> + </div> + ) + } +} + +export default CalendarBoard \ No newline at end of file diff --git a/src/tabviews/custom/components/calendar/board/index.scss b/src/tabviews/custom/components/calendar/board/index.scss new file mode 100644 index 0000000..b79db1a --- /dev/null +++ b/src/tabviews/custom/components/calendar/board/index.scss @@ -0,0 +1,237 @@ +.mk-calendar { + position: relative; + width: 100%; + padding: 20px; + color: rgba(0, 0, 0, 0.85); + + .loading-data { + position: absolute; + top: 0; + left: 20px; + right: 20px; + bottom: 0; + z-index: 2; + opacity: 0.5; + background: #ffffff; + .ant-spin-spinning { + position: absolute; + left: 50%; + top: 270px; + } + } + .mk-calendar-control { + text-align: right; + .ant-select { + width: 90px; + margin-right: 15px; + } + .ant-select + .ant-select { + width: 80px; + } + } + .mk-calendar-content { + margin-top: 10px; + .day-calendar .ant-col { + min-height: 235px; + table { + width: 100%; + thead { + text-align: center; + color: var(--mk-sys-color); + tr { + height: 30px; + } + tr:first-child { + th { + font-weight: 600; + font-size: 16px; + } + } + } + tbody { + text-align: center; + tr { + height: 28px; + td { + .day-wrap { + cursor: pointer; + transition: background 0.1s; + span { + display: inline-block; + width: 100%; + height: 100%; + } + } + .day-wrap.disabled { + cursor: default; + color: rgba(0, 0, 0, 0.35); + } + .day-wrap:not(.disabled):hover { + background: var(--mk-sys-color2); + } + } + } + } + } + } + .month-calendar { + table { + width: 100%; + thead { + text-align: center; + font-size: 16px; + tr { + height: 35px; + } + } + tbody { + tr { + td { + position: relative; + width: 14.2%; + .month-wrap { + cursor: pointer; + height: 120px; + width: calc(100% - 2px); + transition: background 0.1s; + margin-bottom: 2px; + box-shadow: 0px 0px 3px var(--mk-sys-color2); + .header { + font-size: 16px; + padding: 5px 10px; + + .message { + .right { + float: right; + } + .right.danger { + color: #ff4d4f; + } + } + } + .content { + padding: 0 10px 10px; + height: 70px; + overflow-y: auto; + position: absolute; + left: 0; + right: 0; + .message { + width: 100%; + .ant-badge-status-text { + color: inherit; + } + } + } + .content::-webkit-scrollbar { + width: 5px; + } + .content::-webkit-scrollbar-thumb { + border-radius: 5px; + box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.7); + background: rgba(255, 255, 255, 0.7); + } + .content::-webkit-scrollbar-track { + box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05); + border-radius: 3px; + border: 1px solid rgba(0, 0, 0, 0.07); + background: rgba(0, 0, 0, 0); + } + } + + .month-wrap.disabled { + cursor: default; + color: rgba(0, 0, 0, 0.35); + .header { + .message { + .right.danger { + color: rgba(0, 0, 0, 0.35); + } + } + } + } + + .month-wrap:not(.disabled):hover { + background: var(--mk-sys-color1); + } + } + } + } + } + } + .year-calendar { + .year-wrap { + width: calc(100% - 2px); + box-shadow: 0px 0px 3px var(--mk-sys-color2); + cursor: pointer; + transition: background 0.1s; + .header { + text-align: center; + font-size: 16px; + color: var(--mk-sys-color); + } + .content { + padding: 5px 15px 10px; + height: 110px; + overflow-y: auto; + margin-bottom: 2px; + .ant-badge-status-text { + color: inherit; + } + .message { + width: 100%; + overflow: hidden; + margin-bottom: 5px; + text-overflow: ellipsis; + } + } + .content::-webkit-scrollbar { + width: 5px; + } + .content::-webkit-scrollbar-thumb { + border-radius: 5px; + box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.7); + background: rgba(255, 255, 255, 0.7); + } + .content::-webkit-scrollbar-track { + box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05); + border-radius: 3px; + border: 1px solid rgba(0, 0, 0, 0.07); + background: rgba(0, 0, 0, 0); + } + } + .year-wrap:hover { + background: var(--mk-sys-color1); + } + } + } +} +.calendar-day-pop { + .message { + .ant-badge-status-text { + display: inline-block; + min-width: 200px; + max-width: 350px; + vertical-align: middle; + } + } + .ant-popover-inner-content { + min-height: 100px; + max-height: 200px; + overflow-y: auto; + } + .ant-popover-inner-content::-webkit-scrollbar { + width: 5px; + } + .ant-popover-inner-content::-webkit-scrollbar-thumb { + border-radius: 5px; + box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.09); + background: rgba(0, 0, 0, 0.09); + } + .ant-popover-inner-content::-webkit-scrollbar-track { + box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05); + border-radius: 3px; + border: 1px solid rgba(0, 0, 0, 0.07); + background: rgba(0, 0, 0, 0); + } +} diff --git a/src/tabviews/custom/components/calendar/index.jsx b/src/tabviews/custom/components/calendar/index.jsx new file mode 100644 index 0000000..2ad633d --- /dev/null +++ b/src/tabviews/custom/components/calendar/index.jsx @@ -0,0 +1,268 @@ +import React, {Component} from 'react' +import PropTypes from 'prop-types' +import { is, fromJS } from 'immutable' +import { Spin, notification, Modal } from 'antd' + +import Api from '@/api' +import Utils from '@/utils/utils.js' +import asyncComponent from '@/utils/asyncComponent' +import UtilsDM from '@/utils/utils-datamanage.js' +import MKEmitter from '@/utils/events.js' +import './index.scss' + +const NormalHeader = asyncComponent(() => import('@/tabviews/custom/components/share/normalheader')) +const MainSearch = asyncComponent(() => import('@/tabviews/zshare/topSearch')) +const PopupButton = asyncComponent(() => import('@/tabviews/zshare/actionList/popupbutton')) +const CalendarBoard = asyncComponent(() => import('./board')) + +class NormalCalendar extends Component { + static propTpyes = { + config: PropTypes.object, // 缁勪欢閰嶇疆淇℃伅 + mainSearch: PropTypes.any, // 澶栧眰鎼滅储鏉′欢 + } + + state = { + BID: '', // 涓婄骇ID + config: null, // 鍥捐〃閰嶇疆淇℃伅 + loading: false, // 鏁版嵁鍔犺浇鐘舵�� + data: null, // 鏁版嵁 + search: '', + BData: '' + } + + loaded = false + + /** + * @description 鍒濆鍖栧鐞� + */ + UNSAFE_componentWillMount () { + let _config = fromJS(this.props.config).toJS() + + let BData = '' + + if (_config.setting.supModule) { + BData = window.GLOB.CacheData.get(_config.setting.supModule) + } else { + BData = window.GLOB.CacheData.get(_config.$pageId) + } + + this.setState({ + BID: BData ? (BData.$BID || '') : '', + BData: BData, + config: _config, + arr_field: _config.columns.map(col => col.field).join(','), + search: Utils.initMainSearch(_config.search) // 鎼滅储鏉′欢鍒濆鍖栵紙鍚湁鏃堕棿鏍煎紡锛岄渶瑕佽浆鍖栵級 + }, () => { + if (_config.setting.onload === 'true') { + setTimeout(() => { + this.loadData() + }, _config.setting.delay || 0) + } + }) + } + + componentDidMount () { + const { config } = this.state + + MKEmitter.addListener('reloadData', this.reloadData) + MKEmitter.addListener('resetSelectLine', this.resetParentParam) + MKEmitter.addListener('refreshByButtonResult', this.refreshByButtonResult) + + if (config.$cache && !this.loaded) { + Api.getLCacheConfig(config.uuid).then(res => { + if (!res || this.loaded) return + + this.setState({data: res.map((item, index) => { + item.key = index + item.$$uuid = item[config.setting.primaryKey] || '' + item.$Index = index + 1 + '' + + return item + })}) + }) + } + } + + shouldComponentUpdate (nextProps, nextState) { + return !is(fromJS(this.state), fromJS(nextState)) + } + + componentWillUnmount () { + this.setState = () => { + return + } + MKEmitter.removeListener('reloadData', this.reloadData) + MKEmitter.removeListener('resetSelectLine', this.resetParentParam) + MKEmitter.removeListener('refreshByButtonResult', this.refreshByButtonResult) + } + + /** + * @description 鍥捐〃鏁版嵁鏇存柊锛屽埛鏂板唴瀹� + */ + UNSAFE_componentWillReceiveProps (nextProps) { + const { config } = this.state + + if (config.setting.useMSearch && nextProps.mainSearch && !is(fromJS(this.props.mainSearch), fromJS(nextProps.mainSearch))) { + this.setState({}, () => { + this.loadData() + }) + } + } + + /** + * @description 鎸夐挳鎵ц瀹屾垚鍚庨〉闈㈠埛鏂� + * @param {*} menuId // 鑿滃崟Id + * @param {*} position // 鍒锋柊浣嶇疆 + * @param {*} btn // 鎵ц鐨勬寜閽� + */ + refreshByButtonResult = (menuId, position, btn) => { + const { config, BID } = this.state + + if (config.uuid !== menuId) return + + if (position === 'mainline' && config.setting.supModule && BID) { // 鍒锋柊婧愮粍浠舵椂锛岄檮甯﹀埛鏂颁笂绾ц涓庡綋鍓嶇粍浠� + MKEmitter.emit('reloadData', config.setting.supModule, BID) + } else { + this.loadData() + } + } + + resetParentParam = (MenuID, id, data) => { + const { config } = this.state + + if (!config.setting.supModule || config.setting.supModule !== MenuID) return + if (id !== this.state.BID || id !== '') { + this.setState({ BID: id, BData: data }, () => { + this.loadData() + }) + } + } + + reloadData = (menuId) => { + const { config } = this.state + + if (config.uuid !== menuId) return + + this.loadData() + } + + async loadData () { + const { mainSearch } = this.props + const { config, arr_field, BID, search } = this.state + + if (config.setting.supModule && !BID) { // BID 涓嶅瓨鍦ㄦ椂锛屼笉鍋氭煡璇� + this.setState({ + data: [], + }) + this.loaded = true + return + } + + let searches = fromJS(search).toJS() + if (config.setting.useMSearch && mainSearch && mainSearch.length > 0) { // 涓昏〃鎼滅储鏉′欢 + let keys = searches.map(item => item.key.toLowerCase()) + mainSearch.forEach(item => { + if (!keys.includes(item.key.toLowerCase())) { + searches.push(item) + } + }) + } + + let requireFields = searches.filter(item => item.required && item.value === '') + if (requireFields.length > 0) { + return + } + + this.setState({ + loading: true + }) + + let _orderBy = config.setting.order || '' + let param = UtilsDM.getQueryDataParams(config.setting, arr_field, searches, _orderBy, 1, 99999, BID) + + let result = await Api.genericInterface(param) + if (result.status) { + this.loaded = true + if (config.$cache && config.setting.onload !== 'false') { + Api.writeCacheConfig(config.uuid, result.data || '') + } + + let data = result.data.map((item, index) => { + item.key = index + item.$$uuid = item[config.setting.primaryKey] || '' + item.$$BID = BID || '' + + return item + }) + + this.setState({ + data: data, + loading: false + }) + + if (result.message) { + if (result.ErrCode === 'Y') { + Modal.success({ + title: result.message + }) + } else if (result.ErrCode === 'S') { + notification.success({ + top: 92, + message: result.message, + duration: 2 + }) + } + } + } else { + this.setState({ + loading: false + }) + + if (!result.message) return + if (result.ErrCode === 'N') { + Modal.error({ + title: result.message, + }) + } else if (result.ErrCode !== '-2') { + notification.error({ + top: 92, + message: result.message, + duration: 10 + }) + } + } + } + + refreshbysearch = (searches) => { + this.setState({ + search: searches + }, () => { + this.loadData() + }) + } + + render() { + const { config, loading, data, BID, BData } = this.state + + return ( + <div className="normal-calendar-box" id={'anchor' + config.uuid} style={{...config.style}}> + {loading ? + <div className="loading-mask"> + {data ? <div className="ant-spin-blur"></div> : null} + <Spin /> + </div> : null + } + <NormalHeader config={config} /> + {config.search.length ? + <MainSearch BID={BID} config={config} refreshdata={this.refreshbysearch}/> : null + } + {config.action[0] ? + <PopupButton disabled={false} BID={BID} btn={config.action[0]} BData={BData} setting={config.setting} selectedData={[]}/> : null + } + <CalendarBoard config={config} /> + </div> + ) + } +} + +export default NormalCalendar \ No newline at end of file diff --git a/src/tabviews/custom/components/calendar/index.scss b/src/tabviews/custom/components/calendar/index.scss new file mode 100644 index 0000000..d06f8c6 --- /dev/null +++ b/src/tabviews/custom/components/calendar/index.scss @@ -0,0 +1,38 @@ +.normal-calendar-box { + background: #ffffff; + background-position: center center; + background-repeat: no-repeat; + background-size: cover; + min-height: 100px; + position: relative; + + >.ant-btn { + display: none; + } + .loading-mask { + position: absolute; + left: 0px; + top: 0; + right: 0px; + bottom: 0px; + display: flex; + align-items: center; + justify-content: center; + text-align: justify; + z-index: 1; + + .ant-spin-blur { + position: absolute; + width: 100%; + height: 100%; + opacity: 0.5; + background: #ffffff; + } + } +} + +.normal-calendar-box::after { + content: ' '; + display: block; + clear: both; +} diff --git a/src/tabviews/custom/components/group/normal-group/index.jsx b/src/tabviews/custom/components/group/normal-group/index.jsx index 407241a..0b147bf 100644 --- a/src/tabviews/custom/components/group/normal-group/index.jsx +++ b/src/tabviews/custom/components/group/normal-group/index.jsx @@ -36,6 +36,7 @@ const CustomChart = asyncComponent(() => import('@/tabviews/custom/components/chart/custom-chart')) const AntvG6 = asyncComponent(() => import('@/tabviews/custom/components/chart/antv-G6')) const AntvX6 = asyncComponent(() => import('@/tabviews/custom/components/chart/antv-X6')) +const Calendar = asyncComponent(() => import('@/tabviews/custom/components/calendar')) class TabTransfer extends Component { static propTpyes = { @@ -255,6 +256,12 @@ <NormalTree config={item} data={data} mainSearch={mainSearch}/> </Col> ) + } else if (item.type === 'calendar') { + return ( + <Col span={item.width} style={style} key={item.uuid}> + <Calendar config={item} mainSearch={mainSearch}/> + </Col> + ) } else if (item.type === 'editor') { return ( <Col span={item.width} style={style} key={item.uuid}> diff --git a/src/tabviews/custom/components/share/tabtransfer/index.jsx b/src/tabviews/custom/components/share/tabtransfer/index.jsx index f2be4a6..ec4a65c 100644 --- a/src/tabviews/custom/components/share/tabtransfer/index.jsx +++ b/src/tabviews/custom/components/share/tabtransfer/index.jsx @@ -40,6 +40,7 @@ const MkBaseTable = asyncComponent(() => import('@/tabviews/custom/components/table/base-table')) const AntvG6 = asyncComponent(() => import('@/tabviews/custom/components/chart/antv-G6')) const AntvX6 = asyncComponent(() => import('@/tabviews/custom/components/chart/antv-X6')) +const Calendar = asyncComponent(() => import('@/tabviews/custom/components/calendar')) class TabTransfer extends Component { static propTpyes = { @@ -310,6 +311,12 @@ <NormalTree config={item} data={data} mainSearch={mainSearch}/> </Col> ) + } else if (item.type === 'calendar') { + return ( + <Col span={item.width} style={style} key={item.uuid}> + <Calendar config={item} mainSearch={mainSearch}/> + </Col> + ) } else if (item.type === 'editor') { return ( <Col span={item.width} style={style} key={item.uuid}> diff --git a/src/tabviews/custom/components/timeline/normal-timeline/index.jsx b/src/tabviews/custom/components/timeline/normal-timeline/index.jsx index d629c77..3a8bb7e 100644 --- a/src/tabviews/custom/components/timeline/normal-timeline/index.jsx +++ b/src/tabviews/custom/components/timeline/normal-timeline/index.jsx @@ -238,22 +238,6 @@ } } - refreshLineData = (menuId, btn, uuid, count) => { - const { config, data } = this.state - - if (config.uuid !== menuId) return - - let _data = fromJS(data).toJS().forEach(item => { - if (item.$$uuid === uuid) { - item[btn.field] = count - } - }) - - this.setState({ - data: _data - }) - } - reloadData = (menuId) => { const { config } = this.state diff --git a/src/tabviews/custom/index.jsx b/src/tabviews/custom/index.jsx index 900ef50..be64acf 100644 --- a/src/tabviews/custom/index.jsx +++ b/src/tabviews/custom/index.jsx @@ -44,6 +44,7 @@ const Voucher = asyncComponent(() => import('./components/module/voucher')) const Account = asyncComponent(() => import('./components/module/account')) const Iframe = asyncComponent(() => import('./components/iframe')) +const Calendar = asyncComponent(() => import('./components/calendar')) const DebugTable = asyncComponent(() => import('@/tabviews/debugtable')) const TableNodes = asyncComponent(() => import('@/tabviews/zshare/tablenodes')) const MkInterfaces = asyncComponent(() => import('@/tabviews/custom/components/interfaces')) @@ -1422,6 +1423,12 @@ <NormalTree config={item} data={data} mainSearch={mainSearch}/> </Col> ) + } else if (item.type === 'calendar') { + return ( + <Col span={item.width} style={style} key={item.uuid}> + <Calendar config={item} mainSearch={mainSearch}/> + </Col> + ) } else if (item.type === 'code') { return ( <Col span={item.width} style={style} key={item.uuid}> diff --git a/src/tabviews/custom/popview/index.jsx b/src/tabviews/custom/popview/index.jsx index ca59201..7c45f53 100644 --- a/src/tabviews/custom/popview/index.jsx +++ b/src/tabviews/custom/popview/index.jsx @@ -40,6 +40,7 @@ const TimeLine = asyncComponent(() => import('../components/timeline/normal-timeline')) const Voucher = asyncComponent(() => import('../components/module/voucher')) const Iframe = asyncComponent(() => import('../components/iframe')) +const Calendar = asyncComponent(() => import('../components/calendar')) const AntvG6 = asyncComponent(() => import('../components/chart/antv-G6')) const AntvX6 = asyncComponent(() => import('../components/chart/antv-X6')) @@ -1055,6 +1056,12 @@ <NormalTree config={item} data={data} mainSearch={mainSearch}/> </Col> ) + } else if (item.type === 'calendar') { + return ( + <Col span={item.width} style={style} key={item.uuid}> + <Calendar config={item} mainSearch={mainSearch}/> + </Col> + ) } else if (item.type === 'code') { return ( <Col span={item.width} style={style} key={item.uuid}> -- Gitblit v1.8.0