2021-08-06

king

2021-08-06 992f25d08ea2b5a6438ccc792a5c723b8a72f674

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

@@ -1,195 +1,218 @@
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 modules = MenuUtils.getLinkModules(fromJS(window.GLOB.customMenu).toJS().components) || []
  let supmodules = MenuUtils.getSupModules(fromJS(window.GLOB.customMenu).toJS().components, '') || []
  let roleList = sessionStorage.getItem('sysRoles')

  if (roleList) {
    try {
      roleList = JSON.parse(roleList)
    } catch {
      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: '静态'},
      ]
    },
    {
      type: 'radio',
      field: 'linkType',
      label: '受控类型',
      initval: wrap.linkType || '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: 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: '使用固定定位时，请在测试环境中查看定位效果。',
      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: 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: 'multiselect',
      field: 'blacklist',
      label: '黑名单',
      initval: wrap.blacklist || [],
      required: false,
      options: roleList
    },
  ]

  return balconyWrapForm
}