2022-10-12

king

2022-10-12 53b9fb93d0376eb02bb996935f1720b4e95cd897

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

@@ -1,195 +1,275 @@
import React from 'react'
import { fromJS } from 'immutable'
import MenuUtils from '@/utils/utils-custom.js'

/**
 * @description Wrap表单配置信息
 */
export const balconyWrapForm = [
  {
    type: 'text',
    field: 'name',
    label: '组件名称',
    initval: '',
    tooltip: '用于组件间的区分。',
    required: true
  },
  {
    type: 'number',
    field: 'width',
    label: '宽度',
    initval: '',
    tooltip: '栅格布局，每行等分为24列。',
    min: 1,
    max: 24,
    precision: 0,
    required: true
  },
  {
    type: 'radio',
    field: 'datatype',
    label: '数据来源',
    initval: '',
    tooltip: '选择静态值，无需配置数据源。',
    required: false,
    options: [
      {value: 'dynamic', label: '动态'},
      {value: 'static', label: '静态'},
    ]
  },
  {
    type: 'radio',
    field: 'linkType',
    label: '受控类型',
    initval: 'static',
    tooltip: '组件与其他组件之间的控制类型，独立表示与其他没有关联。',
    required: false,
    options: [
      {value: 'static', label: '独立'},
      {value: 'sync', label: '同步'},
      {value: 'sup', label: '上级'},
    ],
    controlFields: [
      {field: 'supModule', values: ['sup']},
      {field: 'supControl', values: ['sup']},
      {field: 'syncModule', values: ['sync']},
      {field: 'checkAll', values: ['sync']},
    ]
  },
  {
    type: 'cascader',
    field: 'supModule',
    label: '上级组件',
    initval: '',
    required: true,
    options: []
  },
  {
    type: 'radio',
    field: 'supControl',
    label: '显示控制',
    tooltip: '当前组件在主表选中行时显示，还是始终显示。',
    initval: 'show',
    required: false,
    options: [
      {value: 'hidden', label: '选行'},
      {value: 'show', label: '始终'},
    ]
  },
  {
    type: 'cascader',
    field: 'syncModule',
    label: '同步组件',
    initval: '',
    required: true,
    options: []
  },
  {
    type: 'radio',
    field: 'checkAll',
    label: '全选',
    initval: 'hidden',
    tooltip: '当同步组件可多选时，设置全选有效。',
    required: false,
    options: [
      {value: 'hidden', label: '隐藏'},
      {value: 'show', label: '显示'},
    ]
  },
  {
    type: 'radio',
    field: 'position',
    label: '位置',
    initval: 'relative',
    tooltip: '使用固定定位时，请在测试环境中查看定位效果。',
    required: false,
    options: [
      {value: 'relative', label: '相对定位'},
      {value: 'fixed', label: '固定定位'},
    ],
    controlFields: [
      {field: 'quick', values: ['fixed']},
      {field: 'top', values: ['fixed']},
      {field: 'right', values: ['fixed']},
      {field: 'bottom', values: ['fixed']},
      {field: 'left', values: ['fixed']},
      {field: 'realwidth', values: ['fixed']},
      {field: 'transform', values: ['fixed']},
    ]
  },
  {
    type: 'select',
    field: 'quick',
    label: '快捷选择',
    initval: '',
    required: false,
    subFields: ['top', 'left', 'right', 'bottom', 'transform'],
    options: [
      {value: 'top', label: '上', top: '0px', left: '0px', right: '0px', bottom: '', transform: ''},
      {value: 'top-left', label: '左上', top: '0px', left: '0px', right: '', bottom: '', transform: ''},
      {value: 'top-right', label: '右上', top: '0px', left: '', right: '0px', bottom: '', transform: ''},
      {value: 'left-middle', label: '左中', top: '50%', left: '0px', right: '', bottom: '', transform: 'translateY(-50%)'},
      {value: 'right-middle', label: '右中', top: '50%', left: '', right: '0px', bottom: '', transform: 'translateY(-50%)'},
      {value: 'bottom-left', label: '左下', top: '', left: '0px', right: '', bottom: '0px', transform: ''},
      {value: 'bottom-right', label: '右下', top: '', left: '', right: '0px', bottom: '0px', transform: ''},
      {value: 'bottom', label: '下', top: '', left: '0px', right: '0px', bottom: '0px', transform: ''},
      {value: 'middle', label: '中间', top: '50%', left: '50%', right: '', bottom: '', transform: 'translate(-50%, -50%)'}
    ]
  },
  {
    type: 'styleInput',
    field: 'top',
    label: '距上',
    initval: '',
    required: false
  },
  {
    type: 'styleInput',
    field: 'right',
    label: '距右',
    initval: '',
    required: false
  },
  {
    type: 'styleInput',
    field: 'bottom',
    label: '距下',
    initval: '',
    required: false
  },
  {
    type: 'styleInput',
    field: 'left',
    label: '距左',
    initval: '',
    required: false
  },
  {
    type: 'styleInput',
    field: 'realwidth',
    label: '实际宽度',
    initval: '',
    required: false
  },
  {
    type: 'select',
    field: 'transform',
    label: '变换',
    initval: '',
    required: false,
    options: [
      {value: 'translateY(-50%)', label: '上移50%'},
      {value: 'translateY(50%)', label: '下移50%'},
      {value: 'translateX(-50%)', label: '左移50%'},
      {value: 'translateX(50%)', label: '右移50%'},
      {value: 'translate(-50%, -50%)', label: '左上移50%'},
      {value: 'translate(-50%, 50%)', label: '左下移50%'},
      {value: 'translate(50%, -50%)', label: '右上移50%'},
      {value: 'translate(50%, 50%)', label: '右下移50%'},
    ]
  },
  {
    type: 'multiselect',
    field: 'blacklist',
    label: '黑名单',
    initval: '',
    required: false,
    options: []
  },
]
export default function (wrap) {
  let menu = fromJS(window.GLOB.customMenu).toJS()

  let modules = MenuUtils.getLinkModules(menu.components) || []
  let supmodules = MenuUtils.getSupModules(menu.components, '') || []
  let roleList = sessionStorage.getItem('sysRoles')
  let appType = sessionStorage.getItem('appType')

  let interfaces = []
  if (menu.interfaces) {
    menu.interfaces.forEach(item => {
      if (item.status === 'true') {
        interfaces.push({
          value: item.uuid,
          label: item.name
        })
      }
    })
  }

  if (roleList) {
    try {
      roleList = JSON.parse(roleList)
    } catch (e) {
      roleList = []
    }
  } else {
    roleList = []
  }

  const balconyWrapForm = [
    {
      type: 'text',
      field: 'name',
      label: '组件名称',
      initval: wrap.name || '',
      tooltip: '用于组件间的区分。',
      required: true
    },
    {
      type: 'number',
      field: 'width',
      label: '宽度',
      initval: wrap.width || 24,
      tooltip: '栅格布局，每行等分为24列。',
      min: 1,
      max: 24,
      precision: 0,
      required: true
    },
    {
      type: 'radio',
      field: 'datatype',
      label: '数据来源',
      initval: wrap.datatype || 'static',
      tooltip: '选择静态值，无需配置数据源。',
      required: false,
      options: [
        {value: 'dynamic', label: '动态'},
        {value: 'static', label: '静态'},
        {value: 'public', label: '公共数据源'},
      ],
      controlFields: [
        {field: 'empty', values: ['dynamic']},
        {field: 'publicId', values: ['public']},
      ]
    },
    {
      type: 'select',
      field: 'publicId',
      label: '数据源',
      initval: wrap.publicId || '',
      required: true,
      options: interfaces
    },
    {
      type: 'radio',
      field: 'linkType',
      label: '受控类型',
      initval: wrap.linkType || 'static',
      tooltip: <div>
        <div>组件与其他组件之间的控制类型: </div>
        <div>1、独立表示与其他组件没有关联。</div>
        <div>2、同步类型中公式、按钮以及全选元素比较特殊，操作数据为其同步组件的数据。</div>
        <div>3、上级类型需添加当前组件的上级组件，并可设置当前组件为始终显示，还是只有在上级组件选行后才显示。</div>
      </div>,
      required: false,
      options: [
        {value: 'static', label: '独立'},
        {value: 'sync', label: '同步'},
        {value: 'sup', label: '上级'},
      ],
      controlFields: [
        {field: 'supModule', values: ['sup']},
        {field: 'supControl', values: ['sup']},
        {field: 'syncModule', values: ['sync']},
        {field: 'checkAll', values: ['sync']},
      ]
    },
    {
      type: 'cascader',
      field: 'supModule',
      label: '上级组件',
      initval: wrap.supModule || [],
      // tooltip: '当上级组件不存在或没有权限时，当前组件不显示。',
      required: true,
      options: supmodules
    },
    {
      type: 'radio',
      field: 'supControl',
      label: '显示控制',
      initval: wrap.supControl || 'show',
      tooltip: '当前组件在主表选中行时显示，还是始终显示。',
      required: false,
      options: [
        {value: 'hidden', label: '选行'},
        {value: 'show', label: '始终'},
      ]
    },
    {
      type: 'cascader',
      field: 'syncModule',
      label: '同步组件',
      initval: wrap.syncModule || '',
      tooltip: '当同步组件不存在或没有权限时，当前组件不显示。',
      required: true,
      options: modules
    },
    {
      type: 'radio',
      field: 'checkAll',
      label: '全选',
      initval: wrap.checkAll || 'hidden',
      tooltip: '当同步组件可多选时，设置全选有效。',
      required: false,
      options: [
        {value: 'hidden', label: '隐藏'},
        {value: 'show', label: '显示'},
      ]
    },
    {
      type: 'radio',
      field: 'position',
      label: '位置',
      initval: wrap.position || 'relative',
      tooltip: '相对定位是相对其正常位置的偏移；绝对定位是相对于原组件的偏移，原组件高度可视为0；固定定位是相对于窗口的位置，定位效果测试环境中查看。',
      required: false,
      options: [
        {value: 'relative', label: '相对定位'},
        {value: 'absolute', label: '绝对定位'},
        {value: 'fixed', label: '固定定位'},
      ],
      controlFields: [
        {field: 'quick', values: ['fixed']},
        {field: 'realwidth', values: ['fixed', 'absolute']},
        {field: 'transform', values: ['fixed', 'absolute']},
      ]
    },
    {
      type: 'select',
      field: 'quick',
      label: '快捷选择',
      initval: '',
      required: false,
      subFields: ['top', 'left', 'right', 'bottom', 'transform'],
      options: [
        {value: 'top', label: '上', top: '0px', left: '0px', right: '0px', bottom: '', transform: ''},
        {value: 'top-left', label: '左上', top: '0px', left: '0px', right: '', bottom: '', transform: ''},
        {value: 'top-right', label: '右上', top: '0px', left: '', right: '0px', bottom: '', transform: ''},
        {value: 'left-middle', label: '左中', top: '50%', left: '0px', right: '', bottom: '', transform: 'translateY(-50%)'},
        {value: 'right-middle', label: '右中', top: '50%', left: '', right: '0px', bottom: '', transform: 'translateY(-50%)'},
        {value: 'bottom-left', label: '左下', top: '', left: '0px', right: '', bottom: '0px', transform: ''},
        {value: 'bottom-right', label: '右下', top: '', left: '', right: '0px', bottom: '0px', transform: ''},
        {value: 'bottom', label: '下', top: '', left: '0px', right: '0px', bottom: '0px', transform: ''},
        {value: 'middle', label: '中间', top: '50%', left: '50%', right: '', bottom: '', transform: 'translate(-50%, -50%)'}
      ]
    },
    {
      type: 'styleInput',
      field: 'top',
      label: '距上',
      initval: wrap.top || '',
      required: false
    },
    {
      type: 'styleInput',
      field: 'right',
      label: '距右',
      initval: wrap.right || '',
      required: false
    },
    {
      type: 'styleInput',
      field: 'bottom',
      label: '距下',
      initval: wrap.bottom || '',
      required: false
    },
    {
      type: 'styleInput',
      field: 'left',
      label: '距左',
      initval: wrap.left || '',
      required: false
    },
    {
      type: 'styleInput',
      field: 'realwidth',
      label: '实际宽度',
      initval: wrap.realwidth || '',
      required: false
    },
    {
      type: 'select',
      field: 'transform',
      label: '变换',
      initval: wrap.transform || '',
      required: false,
      options: [
        {value: 'translateY(-50%)', label: '上移50%'},
        {value: 'translateY(50%)', label: '下移50%'},
        {value: 'translateX(-50%)', label: '左移50%'},
        {value: 'translateX(50%)', label: '右移50%'},
        {value: 'translate(-50%, -50%)', label: '左上移50%'},
        {value: 'translate(-50%, 50%)', label: '左下移50%'},
        {value: 'translate(50%, -50%)', label: '右上移50%'},
        {value: 'translate(50%, 50%)', label: '右下移50%'},
      ]
    },
    {
      type: 'radio',
      field: 'empty',
      label: '空值隐藏',
      initval: wrap.empty || 'show',
      tooltip: '当查询数据为空时，隐藏该组件。',
      required: false,
      skip: true,
      options: [
        {value: 'show', label: '否'},
        {value: 'hidden', label: '是'},
      ],
    },
    {
      type: 'radio',
      field: 'permission',
      label: '权限验证',
      initval: wrap.permission || 'false',
      required: false,
      options: [
        {value: 'true', label: '启用'},
        {value: 'false', label: '禁用'},
      ],
      forbid: !appType
    },
    {
      type: 'multiselect',
      field: 'blacklist',
      label: '黑名单',
      initval: wrap.blacklist || [],
      required: false,
      options: roleList,
      forbid: !!appType
    },
  ]

  return balconyWrapForm
}