2023-07-05

king

2023-07-05 f45b2ad61211cf2821cdaab07676c7906c96410a

2023-07-05

 src/components/normalform/modalform/mkTable/index.scss

@@ -20,7 +20,8 @@
    .color-sketch-block {
      width: 200px;
      position: relative;
      top: 8px;
      top: 4px;
      white-space: nowrap;
    }
    .ant-select {
      width: 100%;

 src/components/tabview/index.jsx

@@ -8,7 +8,7 @@
import 'moment/locale/zh-cn'

import asyncComponent from '@/utils/asyncLoadComponent'
import NotFount from '@/components/404'
// import NotFount from '@/components/404'
import options from '@/store/options.js'
import MKEmitter from '@/utils/events.js'
import Api from '@/api'
@@ -22,7 +22,7 @@
const Iframe = asyncComponent(() => import('@/tabviews/iframe'))
const RoleManage = asyncComponent(() => import('@/tabviews/rolemanage'))
const FormTab = asyncComponent(() => import('@/tabviews/formtab'))
// const Calendar = asyncComponent(() => import('@/tabviews/calendar'))
const Calendar = asyncComponent(() => import('@/tabviews/calendar'))

class TabViews extends Component {
  static propTpyes = {
@@ -211,8 +211,8 @@
    } else if (view.type === 'iframe') {
      return (<Iframe MenuID={view.MenuID} title={view.MenuName} url={view.src}/>)
    } else {
      // return (<Calendar MenuNo={view.MenuNo} MenuID={view.MenuID} MenuName={view.MenuName} param={view.param}/>)
      return (<NotFount />)
      return (<Calendar MenuNo={view.MenuNo} MenuID={view.MenuID} MenuName={view.MenuName} param={view.param}/>)
      // return (<NotFount />)
    }
  }


 src/menu/components/calendar/board/index.jsx

New file
@@ -0,0 +1,363 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Select, Radio, Row, Col, Badge } from 'antd'
import moment from 'moment'

import './index.scss'

const { Option } = Select

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 <= 50; 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 = null

    if (_levels.includes('month')) {
      monthlist = datelist.filter(item => item.month === moment().format('MM'))[0]
    }

    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
      })
    }
  }

  shouldComponentUpdate (nextProps, nextState) {
    return !is(fromJS(this.state), fromJS(nextState))
  }

  getNongLi = (nyear, nmonth, nday) => {
    let jq = this.getjq(nyear, nmonth, nday)

    if (jq) return jq

    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
    }

    if (lday === '初一') {
      return lmonth + '月'
    }

    return lday
  }

  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
  }

  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']
    let monthName = {
      '01': '一月', '02': '二月', '03': '三月', '04': '四月', '05': '五月', '06': '六月',
      '07': '七月', '08': '八月', '09': '九月', '10': '十月', '11': '十一月', '12': '十二月'
    }

    months.forEach(month => {
      let _weeklist = [{week: 1, sublist: []}]
      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)
      }

      for (let i = 1; i <= end; i++) {
        let _day = i < 10 ? `0${i}` : `${i}`

        let item = {
          day: _day,
          time: selectYear + month + _day,
          nltime: this.getNongLi(+selectYear, +month, +_day),
          label: i,
          subData: []
        }

        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)
        }
      }

      let re = 7 - _weeklist.slice(-1)[0].sublist.length
      for (let i = 0; i < re; i++) {
        _weeklist[_weeklist.length - 1].sublist.push(null)
      }

      datelist.push({
        month: month,
        time: selectYear + month,
        label: monthName[month],
        sublist: _weeklist,
        subData: []
      })
    })

    return datelist
  }

  levelChange = (e) => {
    this.setState({ level: e.target.value })
  }

  yearChange = (value) => {
    const { levels, selectMonth } = this.state
    let datelist = this.getDateList(value)
    let monthlist = null

    if (levels.includes('month')) {
      monthlist = datelist.filter(item => item.month === selectMonth)[0]
    }

    this.setState({ selectYear: value, datelist, monthlist })
  }

  render() {
    const { level, selectYear, yearlist, levels, datelist, monthlist } = this.state
    const _levelName = {day: '日', month: '月'}

    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>
          {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.sublist.map(cell => (
                      <tr key={cell.week}>
                        {cell.sublist.map((d, i) => (
                          <td key={i}>
                            {d ? <div className="day-wrap" style={d.style || null}>
                              {d.label}
                            </div> : null }
                          </td>
                        ))}
                      </tr>
                    ))}
                  </tbody>
                </table>
              </Col>
            ))}
          </Row> : null}
          {level === 'month' && monthlist ? <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'}}>
                    {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>
                </div>
              </Col>
            ))}
          </Row>: null}
        </div>
      </div>
    )
  }
}

export default CalendarBoard

 src/menu/components/calendar/board/index.scss

New file
@@ -0,0 +1,208 @@
.mk-calendar {
  position: relative;
  width: 100%;
  padding: 20px;

  .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;
    }
  }
  .mk-calendar-content {
    margin-top: 10px;
    .day-calendar .ant-col {
      min-height: 235px;
      table {
        width: 100%;
        thead {
          text-align: center;
          color: #1890ff;
          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:hover {
                background: #bae7ff;
              }
            }
          }
        }
      }
    }
    .month-calendar {
      table {
        width: 100%;
        thead {
          text-align: center;
          color: #1890ff;
          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 #bae7ff;
                .header {
                  text-align: center;
                  font-size: 16px;
                }
                .content {
                  padding: 0 10px 10px;
                  height: 90px;
                  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:hover {
                background: #e6f7ff;
              }
            }
          }
        }
      }
    }
    .year-calendar {
      .year-wrap {
        width: calc(100% - 2px);
        box-shadow: 0px 0px 3px #bae7ff;
        cursor: pointer;
        transition: background 0.1s;
        .header {
          text-align: center;
          font-size: 16px;
        }
        .content {
          padding: 5px 15px 10px;
          height: 110px;
          overflow-y: auto;
          margin-bottom: 2px;
          .ant-badge-status-text {
            color: inherit;
          }
          .message {
            width: 100%;
            // white-space: nowrap;
            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: #e6f7ff;
      }
    }
  }
}
.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);
  }
}

 src/menu/components/calendar/index.jsx

@@ -2,20 +2,22 @@
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Popover, message } from 'antd'
import { EditOutlined, ToolOutlined, DeleteOutlined, FontColorsOutlined } from '@ant-design/icons'
import { EditOutlined, ToolOutlined, DeleteOutlined, FontColorsOutlined, PlusCircleOutlined } from '@ant-design/icons'

import asyncComponent from '@/utils/asyncComponent'
import asyncIconComponent from '@/utils/asyncIconComponent'
import { resetStyle, getTables, checkComponent } from '@/utils/utils-custom.js'
import MKEmitter from '@/utils/events.js'
import getWrapForm from './options'
import Utils from '@/utils/utils.js'
import './index.scss'

const SettingComponent = asyncIconComponent(() => import('@/menu/datasource'))
const NormalForm = asyncIconComponent(() => import('@/components/normalform'))
const SearchComponent = asyncComponent(() => import('@/templates/sharecomponent/searchcomponent'))
const CopyComponent = asyncIconComponent(() => import('@/menu/components/share/copycomponent'))
const UserComponent = asyncIconComponent(() => import('@/menu/components/share/usercomponent'))
const NormalHeader = asyncComponent(() => import('@/menu/components/share/normalheader'))
const CalendarBoard = asyncComponent(() => import('./board'))

class NormalCalendarComponent extends Component {
  static propTpyes = {
@@ -42,9 +44,10 @@
        name: card.name,
        subtype: card.subtype,
        setting: { interType: 'system' },
        wrap: { title: '', name: card.name, width: card.width || 24 },
        wrap: { title: '', name: card.name, width: card.width || 24, levels: ['day', 'month'] },
        style: { marginLeft: '0px', marginRight: '0px', marginTop: '0px', marginBottom: '0px' },
        headerStyle: { fontSize: '16px', borderBottomWidth: '1px', borderBottomColor: '#e8e8e8' },
        search: [],
        columns: [],
        scripts: [],
      }
@@ -90,7 +93,6 @@
    card.name = card.wrap.name
    if (!window.GLOB.styling || !card.errors) { // 样式修改时不做筛查
      card.$c_ds = true
      card.$c_sc = true
      
      card.errors = checkComponent(card)

@@ -98,7 +100,7 @@
        card.$tables = getTables(card)
      }
    }
    

    this.setState({
      card: card
    })
@@ -118,6 +120,12 @@
    this.updateComponent(_card)
  }

  addSearch = () => {
    const { card } = this.state

    MKEmitter.emit('plusSearch', card.uuid, {uuid: Utils.getuuid(), focus: true, label: 'label', type: 'text', match: '='}, 'simple')
  }

  getWrapForms = () => {
    const { card } = this.state

@@ -125,14 +133,35 @@
  }

  updateWrap = (res) => {
    delete res.quick
    const { card } = this.state

    if (res.hmode) {
      res.mode = res.hmode
      delete res.hmode
    res.show = card.wrap.show || 'true'
    res.advanceType = card.wrap.advanceType || 'modal'
    res.advanceWidth = card.wrap.advanceWidth || 1000
    res.drawerPlacement = card.wrap.drawerPlacement || 'right'
    res.searchRatio = card.wrap.searchRatio || 6
    res.searchLwidth = card.wrap.searchLwidth !== undefined ? card.wrap.searchLwidth : 33.3
    res.borderRadius = card.wrap.borderRadius || 0
    res.resetContrl = card.wrap.resetContrl || 'init'

    if (res.colorField && res.signs) {
      res.signs = res.signs.map(item => {
        try {
          let colors = item.color.match(/\d+/g)
          if ((colors[0] * 0.299 + colors[1] * 0.578 + colors[2] * 0.114) * colors[3] < 192) {
            item.fontColor = '#ffffff'
          } else {
            item.fontColor = ''
          }
        } catch (e) {
          item.fontColor = ''
        }

        return item
      })
    }
    
    this.updateComponent({...this.state.card, wrap: res})

    this.updateComponent({...card, wrap: res})
  }

  render() {
@@ -142,21 +171,23 @@

    return (
      <div className="menu-calendar-edit-box" style={_style} id={card.uuid}>
        <NormalHeader hideSearch="true" config={card} updateComponent={this.updateComponent}/>
        <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
          <div className="mk-popover-control">
            <NormalForm title="日历设置" width={800} update={this.updateWrap} getForms={this.getWrapForms}>
            <PlusCircleOutlined className="plus" title="添加搜索" onClick={this.addSearch}/>
            <NormalForm title="日历设置" width={850} update={this.updateWrap} getForms={this.getWrapForms}>
              <EditOutlined style={{color: '#1890ff'}} title="编辑"/>
            </NormalForm>
            <CopyComponent type="calendar" card={card}/>
            <FontColorsOutlined className="style" title="调整样式" onClick={this.changeStyle}/>
            <UserComponent config={card}/>
            <DeleteOutlined className="close" title="删除组件" onClick={() => this.props.deletecomponent(card.uuid)} />
            <SettingComponent config={card} updateConfig={this.updateComponent} />
          </div>
        } trigger="hover">
          <ToolOutlined />
        </Popover>
        <NormalHeader hideSearch="true" config={card} updateComponent={this.updateComponent}/>
        <SearchComponent config={card} updatesearch={this.updateComponent}/>
        <CalendarBoard config={card} />
        <div className="component-name">
          <div className="center">
            <div className="title" onDoubleClick={() => {

 src/menu/components/calendar/index.scss

@@ -7,8 +7,51 @@
  background-size: cover;
  min-height: 50px;

  .model-menu-card-cell-list {
    flex: 1;
  .model-table-search-list {
    padding: 10px 0px 15px;
    min-height: 65px;
    border-bottom: 1px solid #f0f0f0;
    .page-card {
      background: transparent;
    }
    .quickly-add {
      display: inline-block;
      position: absolute;
      z-index: 3;
      right: 70px;
      bottom: 5px;
      .ant-btn-block {
        background-color: transparent;
        color: #1890ff;
        border: none;
        box-shadow: none !important;
        height: 18px;
        padding: 0 10px;
      }
    }
  }
  .model-table-search-list.length0 {
    min-height: 10px;
    border-bottom: 0;
    >.quickly-add {
      right: unset;
      left: -8px;
      bottom: 0;
    }
    >.ant-row {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      min-height: 10px;
      .common-drawarea-placeholder {
        display: none;
      }
    }
    >.ant-switch {
      display: none;
    }
  }

  >.anticon-tool {
@@ -20,26 +63,6 @@
    cursor: pointer;
    padding: 5px;
    background: rgba(255, 255, 255, 0.55);
  }

  .card-item {
    overflow: hidden;
    position: relative;
    background-color: #ffffff;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 20px;
  }
  
  .card-item:hover {
    box-shadow: 0px 0px 2px #1890ff;
  }

  .model-menu-card-cell-list .card-detail-row > .anticon-plus {
    position: absolute;
    right: -30px;
    font-size: 16px;
  }
}
.menu-calendar-edit-box::after {

 src/menu/components/calendar/options.jsx

@@ -1,3 +1,4 @@
import React from 'react'
/**
 * @description Wrap表单配置信息
 */
@@ -15,7 +16,18 @@
    roleList = []
  }

  const balconyWrapForm = [
  let menulist = sessionStorage.getItem('fstMenuList')
  if (menulist) {
    try {
      menulist = JSON.parse(menulist)
    } catch (e) {
      menulist = []
    }
  } else {
    menulist = []
  }

  const calendarWrapForm = [
    {
      type: 'text',
      field: 'title',
@@ -43,123 +55,52 @@
      required: true
    },
    {
      type: 'radio',
      field: 'direction',
      label: '轴线方向',
      initval: wrap.direction || 'vertical',
      required: false,
      type: 'checkbox',
      field: 'levels',
      label: '日历等级',
      initval: wrap.levels || [],
      required: true,
      options: [
        {value: 'vertical', label: '纵向'},
        {value: 'horizontal', label: '横向'},
      ],
      controlFields: [
        {field: 'mode', values: ['vertical']},
        {field: 'hmode', values: ['horizontal']},
        {field: 'label', values: ['vertical']},
        {field: 'iconSize', values: ['horizontal']},
        {field: 'dotSign', values: ['horizontal']},
      ]
    },
    {
      type: 'radio',
      field: 'mode',
      label: '轴线位置',
      initval: ['left', 'alternate', 'right'].includes(wrap.mode) ? wrap.mode : 'left',
      required: false,
      options: [
        {value: 'left', label: '左侧'},
        {value: 'alternate', label: '中间'},
        {value: 'right', label: '右侧'},
      ]
    },
    {
      type: 'radio',
      field: 'hmode',
      label: '轴线位置',
      initval: ['up', 'down'].includes(wrap.mode) ? wrap.mode : 'up',
      required: false,
      options: [
        {value: 'up', label: '上侧'},
        {value: 'down', label: '下侧'}
      ]
    },
    // {
    //   type: 'radio',
    //   field: 'reverse',
    //   label: '排序',
    //   initval: wrap.reverse || 'false',
    //   required: false,
    //   options: [
    //     {value: 'false', label: '正序'},
    //     {value: 'true', label: '倒序'},
    //   ]
    // },
    {
      type: 'color',
      field: 'color',
      label: '节点颜色',
      initval: wrap.color || '#1890ff',
      tooltip: '节点默认颜色。',
      required: false
    },
    {
      type: 'radio',
      field: 'line',
      label: '连线颜色',
      initval: wrap.line || '',
      required: false,
      options: [
        {value: '', label: '默认'},
        {value: 'system', label: '系统色'},
      ]
    },
    {
      type: 'radio',
      field: 'dotSign',
      label: '节点渲染',
      initval: wrap.dotSign || 'background',
      tooltip: '节点的渲染方式，在节点组中设置的颜色渲染图标还是渲染背景色。',
      required: false,
      options: [
        {value: 'background', label: '背景色'},
        {value: 'icon', label: '图标'},
        {value: 'day', label: '天'},
        {value: 'month', label: '月'},
      ]
    },
    {
      type: 'select',
      field: 'iconSize',
      label: '图标大小',
      initval: wrap.iconSize || '',
      tooltip: '图标可在节点组中添加。',
      required: false,
      options: [
        {value: '', label: '默认(14px)'},
        {value: 'size16', label: '16px'},
        {value: 'size18', label: '18px'},
        {value: 'size20', label: '20px'},
        {value: 'size22', label: '22px'},
        {value: 'size24', label: '24px'},
        {value: 'adaptive', label: '自适应'},
      ]
      field: 'timeField',
      label: '时间字段',
      initval: wrap.timeField || '',
      tooltip: '数据中的时间字段，用于在日历中标记事件位置。',
      required: true,
      options: columns
    },
    {
      type: 'select',
      field: 'label',
      label: '标签',
      initval: wrap.label || '',
      tooltip: '在内容对面单独展示。',
      required: false,
      options: columns,
      forbid: !appType
    },
    {
      type: 'select',
      field: 'node',
      label: '节点控制',
      initval: wrap.node || '',
      tooltip: '选择自定义节点的控制字段后，在节点组中添加节点样式。',
      field: 'endField',
      label: '结束时间',
      initval: wrap.endField || '',
      tooltip: '数据中事件的结束时间，用于在日历中标记事件位置。',
      required: false,
      options: columns
    },
    {
      type: 'select',
      field: 'remarkField',
      label: '信息字段',
      initval: wrap.remarkField || '',
      required: true,
      options: columns
    },
    {
      type: 'select',
      field: 'colorField',
      label: '颜色字段',
      initval: wrap.colorField || '',
      required: false,
      options: columns,
      controlFields: [
        {field: 'signs', notNull: true},
      ]
    },
    {
      type: 'radio',
@@ -175,16 +116,38 @@
    },
    {
      type: 'radio',
      field: 'empty',
      label: '空值隐藏',
      initval: wrap.empty || 'show',
      tooltip: '当查询数据为空时，隐藏该组件。',
      field: 'click',
      label: '点击事件',
      initval: wrap.click || '',
      tooltip: '可通过点击事件跳转至指定页面。',
      required: false,
      skip: true,
      options: [
        {value: 'show', label: '否'},
        {value: 'hidden', label: '是'},
        {value: '', label: '无'},
        {value: 'menu', label: '菜单'},
        {value: 'menus', label: '菜单组'}
      ],
      controlFields: [
        {field: 'menu', values: ['menu']},
        {field: 'menuType', values: ['menus']},
        {field: 'menus', values: ['menus']},
      ]
    },
    {
      type: 'select',
      field: 'menuType',
      label: '菜单类型',
      initval: wrap.menuType || '',
      required: true,
      options: columns,
    },
    {
      type: 'cascader',
      field: 'menu',
      label: '关联菜单',
      initval: wrap.menu || [],
      required: true,
      extendName: 'MenuNo',
      options: menulist,
    },
    {
      type: 'multiselect',
@@ -195,7 +158,66 @@
      options: roleList,
      forbid: !!appType
    },
    {
      type: 'table',
      field: 'signs',
      label: '颜色标识',
      initval: wrap.signs || [],
      required: false,
      span: 24,
      columns: [
        {
          title: '标识',
          dataIndex: 'sign',
          inputType: 'input',
          editable: true,
          unique: true,
          required: false,
          width: '30%'
        },
        {
          title: '颜色',
          dataIndex: 'background',
          inputType: 'color',
          editable: true,
          required: true,
          render: (text, record) => (<div style={{background: text, width: '100px', height: '25px'}}></div>),
          width: '40%'
        }
      ]
    },
    {
      type: 'table',
      field: 'menus',
      label: '菜单组',
      initval: wrap.menus || [],
      required: true,
      span: 24,
      actions: ['view'],
      columns: [
        {
          title: '标识',
          dataIndex: 'sign',
          inputType: 'input',
          editable: true,
          unique: true,
          required: false,
          width: '30%'
        },
        {
          title: '菜单',
          dataIndex: 'menu',
          inputType: 'cascader',
          editable: true,
          required: true,
          extends: 'Menu',
          width: '40%',
          render: (text, record) => record.label,
          options: menulist
        }
      ]
    },
  ]

  return balconyWrapForm
  return calendarWrapForm
} 

 src/menu/components/search/main-search/options.jsx

@@ -119,7 +119,8 @@
        {value: 'false', label: '隐藏'},
      ],
      controlFields: [
        {field: 'borderRadius', values: ['true']}
        {field: 'borderRadius', values: ['true']},
        {field: 'resetContrl', values: ['true']}
      ]
    },
    {
@@ -132,6 +133,17 @@
    },
    {
      type: 'radio',
      field: 'resetContrl',
      label: '重置时',
      initval: wrap.resetContrl || 'init',
      required: false,
      options: [
        {value: 'init', label: '恢复初始值'},
        {value: 'clear', label: '清空'},
      ],
    },
    {
      type: 'radio',
      field: 'permission',
      label: '权限验证',
      initval: wrap.permission || 'false',

 src/menu/components/table/base-table/index.jsx

@@ -247,6 +247,8 @@
    res.drawerPlacement = card.wrap.drawerPlacement || 'right'
    res.searchRatio = card.wrap.searchRatio || 6
    res.searchLwidth = card.wrap.searchLwidth !== undefined ? card.wrap.searchLwidth : 33.3
    res.borderRadius = card.wrap.borderRadius || 0
    res.resetContrl = card.wrap.resetContrl || 'init'

    this.updateComponent({...card, wrap: res})
  }

 src/menu/components/table/edit-table/index.jsx

@@ -292,6 +292,8 @@
    res.drawerPlacement = card.wrap.drawerPlacement || 'right'
    res.searchRatio = card.wrap.searchRatio || 6
    res.searchLwidth = card.wrap.searchLwidth !== undefined ? card.wrap.searchLwidth : 33.3
    res.borderRadius = card.wrap.borderRadius || 0
    res.resetContrl = card.wrap.resetContrl || 'init'

    let _card = {...card, wrap: res}


 src/menu/components/table/normal-table/index.jsx

@@ -344,6 +344,8 @@
    res.drawerPlacement = card.wrap.drawerPlacement || 'right'
    res.searchRatio = card.wrap.searchRatio || 6
    res.searchLwidth = card.wrap.searchLwidth !== undefined ? card.wrap.searchLwidth : 33.3
    res.borderRadius = card.wrap.borderRadius || 0
    res.resetContrl = card.wrap.resetContrl || 'init'

    this.updateComponent({...card, wrap: res})
  }

 src/menu/datasource/verifycard/customscript/index.jsx

@@ -12,6 +12,7 @@

class CustomForm extends Component {
  static propTpyes = {
    type: PropTypes.string,         // 组件类型
    defaultsql: PropTypes.string,   // 默认sql
    setting: PropTypes.object,      // 设置
    searches: PropTypes.array,      // 搜索条件
@@ -255,7 +256,7 @@
  }

  render() {
    const { systemScripts, setting } = this.props
    const { systemScripts, setting, type } = this.props
    const { getFieldDecorator } = this.props.form
    const { usefulFields } = this.state

@@ -290,7 +291,7 @@
            <Form.Item label="可用字段" className="field-able">
              <Tooltip mouseLeaveDelay={0.3} mouseEnterDelay={0.3} placement="top" title={'公共值，请按照@xxx@格式使用。'}><span style={{color: '#1890ff'}}>BID, LoginUID, SessionUid, UserID, Appkey, time_id, typename</span></Tooltip>,&nbsp;
              <Tooltip mouseLeaveDelay={0.3} mouseEnterDelay={0.3} placement="top" title={'系统变量，系统会定义变量并赋值。'}><span style={{color: '#fa8c16'}}>UserName, FullName, RoleID, mk_departmentcode, mk_organization, mk_user_type, mk_nation, mk_province, mk_city, mk_district, mk_address</span></Tooltip>,&nbsp;
              <Tooltip mouseLeaveDelay={0.3} mouseEnterDelay={0.3} placement="top" title={'排序、分页以及搜索条件变量，请按照@xxx@格式使用。'}>orderBy, pageSize, pageIndex{usefulFields ? ', ' + usefulFields : ''}</Tooltip>
              <Tooltip mouseLeaveDelay={0.3} mouseEnterDelay={0.3} placement="top" title={'排序、分页以及搜索条件变量，请按照@xxx@格式使用。'}>orderBy, pageSize, pageIndex{usefulFields ? ', ' + usefulFields : ''}{type === 'calendar' ? ', mk_year' : ''}</Tooltip>
              <Tooltip mouseLeaveDelay={0.3} mouseEnterDelay={0.3} placement="top" title={'url变量，请按照@xxx@格式使用。'}>{urlFields ? ', ' : ''}<span style={{color: '#13c2c2'}}>{urlFields}</span></Tooltip>
            </Form.Item>
          </Col>

 src/menu/datasource/verifycard/index.jsx

@@ -657,6 +657,7 @@
  }

  sqlverify = (resolve, reject, change = false, testScripts) => {
    const { config } = this.props
    const { columns, setting, scripts, searches, defaultSearch, debugId } = this.state

    let _scripts = scripts.filter(item => item.status !== 'false')
@@ -681,7 +682,7 @@

    if ((setting.interType === 'system' && setting.execute !== 'false') || _scripts.length > 0) {
      let timestamp = moment().format('YYYY-MM-DD HH:mm:ss')
      let r = SettingUtils.getDebugSql(setting, _scripts, columns, searches, defaultSearch, '2023-04-20 15:29:37')
      let r = SettingUtils.getDebugSql(setting, _scripts, columns, searches, defaultSearch, config.type, '2023-04-20 15:29:37')

      let _debugId = md5(r.sql)

@@ -1027,6 +1028,7 @@
              this.setState({visible: true, script: null, scriptValue: ''})
            }}/> : null}
            <CustomScriptsForm
              type={config.type}
              setting={setting}
              searches={searches}
              defaultsql={defaultsql}

 src/menu/datasource/verifycard/settingform/index.jsx

@@ -472,7 +472,7 @@
              </Form.Item>
            </Col> : null}
            {/* 1、不分页且不存在上级模块 */}
            {!['navbar', 'interface'].includes(config.type) && !['editable', 'basetable', 'dualdatacard'].includes(config.subtype) && (!config.pageable || (config.pageable && setting.laypage === 'false')) && (setting.supModule.length === 0 || setting.supModule[0] === 'empty') && setting.interType === 'system' && setting.onload !== 'false' ? <Col span={8}>
            {!['navbar', 'interface', 'calendar'].includes(config.type) && !['editable', 'basetable', 'dualdatacard'].includes(config.subtype) && (!config.pageable || (config.pageable && setting.laypage === 'false')) && (setting.supModule.length === 0 || setting.supModule[0] === 'empty') && setting.interType === 'system' && setting.onload !== 'false' ? <Col span={8}>
              <Form.Item label={
                <Tooltip placement="topLeft" title={'初始化加载时，是否与其他组件一同加载数据，注：如菜单未使用后端缓存，则查询语句大于8000字符时无效。'}>
                  <QuestionCircleOutlined className="mk-form-tip" />

 src/menu/datasource/verifycard/utils.jsx

@@ -7,7 +7,7 @@
   * @return {Object}  setting       页面设置
   * @return {Array}   columns       显示字段
   */
  static getDebugSql (setting, scripts, columns, searches = [], defSearch, timestamp) {
  static getDebugSql (setting, scripts, columns, searches = [], defSearch, type, timestamp) {
    let sql = ''
    let error = ''
    let _dataresource = ''
@@ -55,6 +55,11 @@
    _dataresource = _dataresource.replace(/\$sum@/ig, '/*$sum@')
    _dataresource = _dataresource.replace(/@sum\$/ig, '@sum$*/')

    if (type === 'calendar') {
      _dataresource = _dataresource.replace(/@mk_year@/ig, '')
      _customScript = _customScript.replace(/@mk_year@/ig, '')
    }

    if (_customScript) {
      _customScript = `declare @ErrorCode nvarchar(50),@retmsg nvarchar(4000),@UserName nvarchar(50),@FullName nvarchar(50),@RoleID nvarchar(512),@mk_departmentcode nvarchar(512),@mk_organization nvarchar(512),@mk_user_type nvarchar(20),@mk_nation nvarchar(50),@mk_province nvarchar(50),@mk_city nvarchar(50),@mk_district nvarchar(50),@mk_address nvarchar(100) select @ErrorCode='',@retmsg =''
        ${_customScript}

 src/menu/menushell/card.jsx

@@ -33,6 +33,7 @@
const Iframe = asyncComponent(() => import('@/menu/components/iframe'))
const AntvG6 = asyncComponent(() => import('@/menu/components/chart/antv-G6'))
const AntvX6 = asyncComponent(() => import('@/menu/components/chart/antv-X6'))
const Calendar = asyncComponent(() => import('@/menu/components/calendar'))

const Card = ({ id, card, moveCard, findCard, delCard, unGroup, updateConfig }) => {
  const originalIndex = findCard(id).index
@@ -126,6 +127,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}/>)
    } else if (card.type === 'module' && card.subtype === 'voucher') {
      return (<Voucher card={card} updateConfig={updateConfig} deletecomponent={delCard}/>)
    } else if (card.type === 'module' && card.subtype === 'account') {

 src/menu/menushell/index.jsx

@@ -121,6 +121,7 @@
        antvX6: '流程图',
        iframe: 'iframe',
        module: '模块',
        calendar: '日历',
        card: '卡片'
      }
      let i = 1

 src/menu/transfer/index.jsx

@@ -161,6 +161,7 @@
      cell.wrap.advanceWidth = _config.components[0].wrap.advanceWidth || 1000
      cell.wrap.searchLwidth = _config.components[0].wrap.searchLwidth || 33.3
      cell.wrap.searchRatio = _config.components[0].wrap.searchRatio || 6
      cell.wrap.resetContrl = _config.components[0].wrap.resetContrl || 'init'
      cell.wrap.show = _config.components[0].wrap.show || 'true'
      
      if (cell.wrap.advanceType === 'drawer') {

 src/tabviews/basetable/index.jsx

@@ -192,7 +192,7 @@

      let BID = param.$BID || ''

      config.components = this.formatSetting(config.components, mainSearch, regs)
      config.components = this.formatSetting(config.components, regs)

      this.setState({
        BID: BID,

 src/tabviews/commontable/index.jsx

@@ -454,6 +454,7 @@
        searchRatio: config.setting.searchRatio || '',
        searchLwidth: config.setting.searchLwidth,
        borderRadius: config.setting.borderRadius,
        resetContrl: config.setting.resetContrl,
      }

      this.setState({

 src/tabviews/subtable/index.jsx

@@ -358,6 +358,7 @@
        searchRatio: config.setting.searchRatio || '',
        searchLwidth: config.setting.searchLwidth,
        borderRadius: config.setting.borderRadius,
        resetContrl: config.setting.resetContrl,
      }

      this.setState({

 src/tabviews/subtabtable/index.jsx

@@ -313,6 +313,7 @@
        searchRatio: config.setting.searchRatio || '',
        searchLwidth: config.setting.searchLwidth,
        borderRadius: config.setting.borderRadius,
        resetContrl: config.setting.resetContrl,
      }

      this.setState({

 src/tabviews/zshare/topSearch/index.jsx

@@ -66,6 +66,7 @@
      _setting.labelCol = {style: {width: _setting.labelwidth + '%'}}
      _setting.wrapperCol = {style: {width: (100 - _setting.labelwidth) + '%'}}
      _setting.borderRadius = config.wrap.borderRadius
      _setting.resetContrl = config.wrap.resetContrl || 'init'
    }
    
    if (config.type === 'search') {
@@ -699,11 +700,17 @@
   * @description 搜索条件重置
   */
  handleReset = () => {
    const { setting } = this.state

    let record = {}
    let advanceValues = []
    let searchlist = this.state.searchlist.map(item => {
      item.initval = item.oriInitval

      if (setting.resetContrl === 'clear' && ['text', 'date', 'datemonth', 'dateweek', 'daterange'].includes(item.type)) {
        item.initval = ''
      }

      if (item.type === 'group') {
        record[item.datefield] = item.initval
        record[item.field] = item.initType

 src/templates/sharecomponent/searchcomponent/settingform/index.jsx

@@ -12,14 +12,16 @@
  }

  state = {
    advanceType: ''
    advanceType: '',
    show: ''
  }

  UNSAFE_componentWillMount () {
    const { setting } = this.props

    this.setState({
      advanceType: setting.advanceType || 'modal'
      advanceType: setting.advanceType || 'modal',
      show: setting.show || 'true'
    })
  }

@@ -39,7 +41,7 @@
  render() {
    const { setting } = this.props
    const { getFieldDecorator } = this.props.form
    const { advanceType } = this.state
    const { advanceType, show } = this.state

    const formItemLayout = {
      labelCol: {
@@ -60,7 +62,7 @@
              {getFieldDecorator('show', {
                initialValue: setting.show || 'true'
              })(
                <Radio.Group>
                <Radio.Group onChange={(e) => this.setState({show: e.target.value})}>
                  <Radio value="true">显示</Radio>
                  <Radio value="false">隐藏</Radio>
                </Radio.Group>
@@ -152,6 +154,18 @@
              })(<InputNumber min={0} precision={0} onPressEnter={this.props.inputSubmit}/>)}
            </Form.Item>
          </Col>
          {show === 'true' ? <Col span={12}>
            <Form.Item label="重置时">
              {getFieldDecorator('resetContrl', {
                initialValue: setting.resetContrl || 'init',
              })(
                <Radio.Group>
                  <Radio value="init">恢复初始值</Radio>
                  <Radio value="clear">清空</Radio>
                </Radio.Group>
              )}
            </Form.Item>
          </Col> : null}
        </Row>
      </Form>
    )

 src/templates/sharecomponent/settingcomponent/index.jsx

@@ -121,6 +121,7 @@
    setting.drawerPlacement = ori.drawerPlacement || 'right'
    setting.searchRatio = ori.searchRatio || 6
    setting.searchLwidth = ori.searchLwidth !== undefined ? ori.searchLwidth : 33.3
    setting.resetContrl = ori.resetContrl || 'init'

    if (window.GLOB.funcs && window.GLOB.funcs.length > 0) {
      window.GLOB.funcs.forEach(m => {