2021-10-14

king

2021-10-14 dddb2c96f42d9c852dba26ff9a27daa12bd85008

2021-10-14

 src/components/normalform/modalform/mkSelect/index.jsx

@@ -115,8 +115,8 @@
          onSelect={this.selectChange}
          onChange={(val) => val === undefined && this.selectChange('')}
        >
          {options.map(option =>
            <Select.Option key={option.value || option.field} disabled={option.disabled} value={option.value || option.field}>{option.label || option.text}</Select.Option>
          {options.map((option, i) =>
            <Select.Option key={i} disabled={option.disabled} value={option.value || option.field || ''}>{option.label || option.text}</Select.Option>
          )}
        </Select>
      )

 src/menu/components/card/cardcomponent/index.jsx

@@ -13,6 +13,7 @@

const NormalForm = asyncIconComponent(() => import('@/components/normalform'))
const CardCellComponent = asyncComponent(() => import('../cardcellcomponent'))
const CardMenus = asyncComponent(() => import('./menus-wrap'))
const CopyComponent = asyncIconComponent(() => import('@/menu/components/share/copycomponent'))
const PasteController = asyncIconComponent(() => import('@/components/paste'))

@@ -192,8 +193,7 @@
        }
      })
    }

    return getSettingForm(card.setting, cards.subtype === 'propcard', buttons)
    return getSettingForm(card.setting, cards.subtype, buttons, card.$cardType, cards.columns)
  }

  updateSetting = (res) => {
@@ -273,6 +273,16 @@
    }
  }

  updateMenus = (res) => {
    const { card } = this.state

    this.setState({
      card: {...card, menus: res}
    })

    this.props.updateElement({...card, menus: res})
  }

  render() {
    const { cards, offset } = this.props
    const { card, elements, side } = this.state
@@ -303,6 +313,8 @@
                <NormalForm title="卡片设置" width={800} update={this.updateSetting} getForms={this.getSettingForms}>
                  <Icon type="edit" className="edit" title="编辑"/>
                </NormalForm>
                {cards.subtype === 'datacard' && card.$cardType !== 'extendCard' && card.setting.click === 'menus' ?
                  <CardMenus card={card} updateMenus={this.updateMenus}/> : null}
                <CopyComponent type="cardcell" card={card}/>
                <PasteController options={['action', 'customCardElement']} updateConfig={this.paste} />
                <Icon className="style" title="调整样式" onClick={this.changeStyle} type="font-colors" />

 src/menu/components/card/cardcomponent/menus-wrap/index.jsx

New file
@@ -0,0 +1,95 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Modal, Icon } from 'antd'

import MenusForm from './menus'
import './index.scss'

class MenusWrap extends Component {
  static propTpyes = {
    card: PropTypes.object,
    updateMenus: PropTypes.func
  }

  state = {
    visible: false,
    menus: [],
  }

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

  trigger = () => {
    const { card } = this.props

    let appType = sessionStorage.getItem('appType') || ''
    let menulist = []

    if (appType) {
      menulist = sessionStorage.getItem('appMenus')
      if (menulist) {
        try {
          menulist = JSON.parse(menulist)
        } catch (e) {
          menulist = []
        }
      } else {
        menulist = []
      }
    } else {
      menulist = sessionStorage.getItem('fstMenuList')
      if (menulist) {
        try {
          menulist = JSON.parse(menulist)
        } catch (e) {
          menulist = []
        }
      } else {
        menulist = []
      }
    }
    this.setState({
      appType,
      menulist,
      visible: true,
      menus: card.menus || []
    })
  }

  submit = () => {
    this.setState({
      visible: false
    })
    this.props.updateMenus(this.state.menus)
  }

  update = (menus) => {
    this.setState({menus})
  }

  render() {
    const { visible, menus, appType, menulist } = this.state

    return (
      <>
        <Icon type="menu" title="菜单组" onClick={this.trigger}/>
        <Modal
          title="菜单组"
          wrapClassName="menus-field-modal"
          visible={visible}
          width={900}
          maskClosable={false}
          onOk={this.submit}
          onCancel={() => { this.setState({ visible: false })}}
          destroyOnClose
        >
          <MenusForm menus={menus} appType={appType} menulist={menulist} update={this.update}/>
        </Modal>
      </>
    )
  }
}

export default MenusWrap

 src/menu/components/card/cardcomponent/menus-wrap/index.scss

New file
@@ -0,0 +1,9 @@
.menus-field-modal {
  .ant-modal {
    top: 70px;
  }
  .ant-modal-body {
    min-height: 150px;
    padding-top: 40px;
  }
}

 src/menu/components/card/cardcomponent/menus-wrap/menus/columnform/index.jsx

New file
@@ -0,0 +1,83 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { Form, Row, Col, Button, Input, Select, Cascader } from 'antd'
import './index.scss'

class ExcelOutColumn extends Component {
  static propTpyes = {
    appType: PropTypes.string,
    menulist: PropTypes.array,
    columnChange: PropTypes.func    // 修改函数
  }

  handleConfirm = () => {
    // 表单提交时检查输入值是否正确
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        this.props.columnChange(values)
        this.props.form.setFieldsValue({
          Column: '',
          Text: '',
          Width: 20
        })
      }
    })
  }

  render() {
    const { appType, menulist } = this.props
    const { getFieldDecorator } = this.props.form
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      }
    }

    return (
      <Form {...formItemLayout} className="verify-form">
        <Row gutter={24}>
          <Col span={10}>
            <Form.Item label="标识">
              {getFieldDecorator('name', {
                initialValue: '',
                rules: [
                  {
                    required: true,
                    message: '请输入标识!'
                  }
                ]
              })(<Input placeholder="" autoComplete="off" />)}
            </Form.Item>
          </Col>
          <Col span={10}>
            <Form.Item label="菜单">
              {getFieldDecorator('menu', {
                initialValue: appType ? '' : [],
                rules: [
                  {
                    required: true,
                    message: '请选择菜单!'
                  }
                ]
              })(appType ? <Select>
                {menulist.map((item, i) => (<Select.Option key={i} value={item.value}> {item.label || item.text} </Select.Option>))}
              </Select> : <Cascader options={menulist} placeholder=""/>)}
            </Form.Item>
          </Col>
          <Col span={4} className="add">
            <Button onClick={this.handleConfirm} type="primary" className="mk-green">
              添加
            </Button>
          </Col>
        </Row>
      </Form>
    )
  }
}

export default Form.create()(ExcelOutColumn)

 src/menu/components/card/cardcomponent/menus-wrap/menus/columnform/index.scss

 src/menu/components/card/cardcomponent/menus-wrap/menus/index.jsx

New file
@@ -0,0 +1,82 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { fromJS } from 'immutable'

import ColumnForm from './columnform'
import asyncComponent from '@/utils/asyncComponent'
import './index.scss'

const EditTable = asyncComponent(() => import('@/templates/zshare/editTable'))

class CardMenus extends Component {
  static propTpyes = {
    appType: PropTypes.string,
    menulist: PropTypes.array,
    menus: PropTypes.array,
    update: PropTypes.func
  }

  state = {
    columns: [
      {
        title: '标识',
        dataIndex: 'name',
        inputType: 'input',
        editable: true,
        unique: true,
        width: '30%'
      },
      {
        title: '菜单',
        dataIndex: 'menu',
        inputType: !this.props.appType ? 'cascader' : 'select',
        editable: true,
        required: true,
        width: '40%',
        render: (text) => {
          if (text === 'image') {
            return '图片'
          } else {
            return '文本'
          }
        },
        options: this.props.menulist
      }
    ]
  }

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

    this.setState({
      menus: fromJS(menus).toJS()
    })
  }

  columnChange = (values) => {
    const { menus } = this.state

    this.setState({menus: [...menus, values]})
  }

  changeColumns = (columns) => {
    // const { menus } = this.state

    this.setState({menus: columns})
  }

  render() {
    const { appType, menulist } = this.props
    const { menus, columns } = this.state

    return (
      <div className="menus-box-wrap">
        <ColumnForm appType={appType} menulist={menulist} columnChange={this.columnChange}/>
        {/* <div style={{color: '#959595', fontSize: '13px', paddingLeft: '10px'}}>如需导出序号，请使用字段 $Index。</div> */}
        <EditTable actions={['edit', 'move', 'del']} type="excelcolumn" data={menus} columns={columns} onChange={this.changeColumns}/>
      </div>
    )
  }
}

export default CardMenus

 src/menu/components/card/cardcomponent/menus-wrap/menus/index.scss

New file
@@ -0,0 +1,3 @@
// .menus-box-wrap {
  
// }

 src/menu/components/card/cardcomponent/options.jsx

@@ -1,8 +1,9 @@
/**
 * @description Setting表单配置信息
 */
export default function (setting, hasPrimaryKey, buttons = []) {
export default function (setting, subtype, buttons = [], cardType, columns) {
  let appType = sessionStorage.getItem('appType')
  let hasMenus = subtype === 'datacard' && cardType !== 'extendCard'

  let menulist = []
  let appmenulist = []
@@ -29,6 +30,11 @@
    } else {
      menulist = []
    }
  }

  let ops = []
  if (hasMenus) {
    ops = [{value: 'menus', label: '菜单组'}]
  }

  const cardSettingForm = [
@@ -84,10 +90,10 @@
      initval: setting.primaryId || '',
      tooltip: '设置一个属性卡静态ID，向其他组件传递的指定静态ID值',
      required: false,
      forbid: !hasPrimaryKey
      forbid: subtype !== 'propcard'
    },
    {
      type: 'radio',
      type: !hasMenus ? 'radio' : 'select',
      field: 'click',
      label: '点击事件',
      initval: setting.click || '',
@@ -98,16 +104,26 @@
        {value: 'menu', label: '菜单'},
        {value: 'link', label: '链接'},
        {value: 'button', label: '按钮'},
        ...ops
      ],
      controlFields: [
        {field: 'menu', values: ['menu']},
        {field: 'linkurl', values: ['link']},
        {field: 'open', values: ['menu', 'link']},
        {field: 'joint', values: ['menu', 'link']},
        {field: 'open', values: ['menu', 'link', 'menus']},
        {field: 'joint', values: ['menu', 'link', 'menus']},
        {field: 'linkbtn', values: ['button']},
        {field: 'menuType', values: ['menus']},
      ]
    },
    {
      type: 'select',
      field: 'menuType',
      label: '菜单类型',
      initval: setting.menuType || '',
      required: true,
      options: columns,
    },
    {
      type: appType ? 'select' : 'cascader',
      field: 'menu',
      label: '关联菜单',

 src/menu/components/card/data-card/index.jsx

@@ -77,7 +77,8 @@
          },
          backStyle: {},
          elements: [],
          backElements: []
          backElements: [],
          menus: []
        }]
      }