king
2023-03-14 da34633b25d16359cd91a656acad5e811f9972b7
src/menu/components/card/cardcellcomponent/formconfig.jsx
@@ -1,16 +1,48 @@
// import zhCN from '@/locales/zh-CN/model.js'
// import enUS from '@/locales/en-US/model.js'
// const Formdict = localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS
import MenuUtils from '@/utils/utils-custom.js'
/**
 * @description 获取按钮表单配置信息
 * @param {*} card           编辑按钮
 * @param {*} setting        组件配置
 * @param {*} permFuncField  存储过程可用的开始字段
 * @param {*} type           按钮类型,用于区分可选的打开方式
 * @description 获取元素配置信息
 * @param {*} card
 * @param {*} type
 */
export function getCardCellForm (card) {
export function getCardCellForm (card, cards, cardCell) {
  let _options = [
    { value: 'text', text: '文本'},
    { value: 'number', text: '数值'},
    { value: 'picture', text: '图片'},
    { value: 'video', text: '视频'},
    { value: 'icon', text: '图标'},
    { value: 'slider', text: '进度条'},
    { value: 'splitline', text: '分割线'},
    { value: 'barcode', text: '条形码'},
    { value: 'qrcode', text: '二维码'},
    { value: 'currentDate', text: '当前时间'},
    { value: 'formula', text: '公式'},
    { value: 'color', text: '颜色'},
  ]
  let anchors = []
  if (window.GLOB.customMenu.Template === 'BaseTable') {
    anchors = null
  } else {
    anchors = MenuUtils.getAnchors(window.GLOB.customMenu.components, cards.uuid) || []
  }
  if (cards.type === 'table' || (cards.type === 'card' && cards.subtype !== 'propcard')) {
    _options.push({value: 'sequence', text: '序号'})
  } else if (card.eleType === 'sequence') { // 拖拽添加类型转换
    card.eleType = 'text'
  }
  if (card.eleType === 'icon' && card.datatype === 'dynamic' && !card.field) { // 拖拽添加类型转换
    card.datatype = 'static'
  }
  let appType = sessionStorage.getItem('appType')
  let tooltip = ''
  if (cardCell.$cardType === 'extendCard') {
    tooltip = '在扩展卡片中,动态数据显示值为获取到的第一行数据。'
  }
  let forms = [
    {
      type: 'select',
@@ -18,21 +50,14 @@
      label: '元素类型',
      initVal: card.eleType,
      required: true,
      options: [
        { value: 'text', text: '文本'},
        { value: 'number', text: '数值'},
        { value: 'picture', text: '图片'},
        { value: 'icon', text: '图标'},
        { value: 'link', text: '链接'},
        { value: 'slider', text: '进度条'},
        { value: 'splitline', text: '分割线'},
      ]
      options: _options
    },
    {
      type: 'radio',
      key: 'datatype',
      label: '数据类型',
      initVal: card.datatype || 'dynamic',
      initVal: card.datatype || 'static',
      tooltip,
      required: true,
      options: [
        { value: 'dynamic', text: '动态' },
@@ -48,27 +73,136 @@
      options: []
    },
    {
      type: 'file',
      key: 'url',
      label: '图片',
      initVal: card.url || '',
      maxfile: 1,
      required: false
      type: 'icon',
      key: 'icon',
      label: '图标',
      initVal: card.icon,
      required: true
    },
    {
      type: 'text',
      key: 'value',
      min: 0,
      label: '内容',
      initVal: card.value || '',
      tooltip: '文本类型,会替换内容中的@username@、@fullName@、@mk_city@、@appname@、@bid@。',
      required: true
    },
    {
      type: 'file',
      key: 'url',
      label: '图片/文件',
      tooltip: '使用静态图片时,@icon@代表头像。',
      initVal: card.url || '',
      maxfile: 1,
      required: true
    },
    {
      type: 'radio',
      key: 'autoPlay',
      label: '自动播放',
      initVal: card.autoPlay || 'false',
      required: false,
      options: [
        { value: 'true', text: '是' },
        { value: 'false', text: '否' }
      ]
    },
    {
      type: 'radio',
      key: 'loop',
      label: '循环播放',
      initVal: card.loop || 'false',
      required: false,
      options: [
        { value: 'true', text: '是' },
        { value: 'false', text: '否' }
      ]
    },
    {
      type: 'number',
      key: 'startTime',
      precision: 0,
      label: '开始时间',
      initVal: card.startTime || 0,
      tooltip: '视频开始播放的时间,用于调整视频初始化展示的界面。',
      required: false
    },
    {
      type: 'radio',
      key: 'posterType',
      label: '预览图',
      initVal: card.posterType || '',
      required: false,
      options: [
        { value: '', text: '无' },
        { value: 'dynamic', text: '动态' },
        { value: 'static', text: '静态' }
      ]
    },
    {
      type: 'file',
      key: 'posterUrl',
      label: '预览地址',
      initVal: card.posterUrl || '',
      maxfile: 1,
      required: true
    },
    {
      type: 'select',
      key: 'labelfield',
      label: '提示字段',
      initVal: card.labelfield || '',
      key: 'posterField',
      label: '预览地址',
      initVal: card.posterField || '',
      required: true
    },
    {
      type: 'number',
      key: 'decimal',
      min: 0,
      max: 18,
      decimal: 0,
      label: '小数位',
      initVal: card.decimal === undefined ? '' : card.decimal,
      required: false
    },
    {
      type: 'select',
      key: 'format',
      label: '格式化',
      initVal: card.format || '',
      required: false,
      options: []
      options: [],
      oriOptions: [
        { value: '', text: '无' },
        { value: 'percent', text: '百分数' },
        { value: 'thdSeparator', text: '千分位' },
        { value: 'abs', text: '绝对值' },
        { value: 'encryption', text: '加密'},
        { value: 'YYYY-MM-DD', text: 'YYYY-MM-DD' },
        { value: 'YYYY-MM-DD HH:mm', text: 'YYYY-MM-DD HH:mm' },
        { value: 'YYYY-MM-DD HH:mm:ss', text: 'YYYY-MM-DD HH:mm:ss' },
        { value: 'MM月DD日', text: 'MM月DD日' },
        { value: 'YYYY年MM月DD日', text: 'YYYY年MM月DD日' },
        { value: 'HH:mm', text: '时分(例:16:57)' },
        { value: 'ahh:mm', text: '自定义1(例:上午10:57)' },
        { value: 'MM月DD日 ahh:mm', text: '自定义2(例:12月17日 上午10:57)' },
        { value: 'calendar1', text: '自定义3(例:今天 上午10:57)' },
        { value: 'calendar2', text: '自定义4(例:刚刚、昨天、5天前)' },
      ]
    },
    {
      type: 'select',
      key: 'dateFormat',
      label: '格式化',
      initVal: card.dateFormat || 'YYYY-MM-DD',
      required: true,
      options: [
        { value: 'YYYY-MM-DD', text: 'YYYY-MM-DD' },
        { value: 'YYYY', text: 'YYYY' },
        { value: 'YYYY-MM', text: 'YYYY-MM' },
        { value: 'YYYY-MM-DD HH:mm', text: 'YYYY-MM-DD HH:mm' },
        { value: 'YYYY-MM-DD HH:mm:ss', text: 'YYYY-MM-DD HH:mm:ss' },
      ]
    },
    {
      type: 'text',
@@ -85,116 +219,101 @@
      required: false
    },
    {
      type: 'select',
      key: 'icon',
      label: '图标',
      initVal: card.icon,
      required: true,
      options: [
        { value: 'question-circle', text: 'question-circle'},
        { value: 'alert', text: 'alert'},
        { value: 'cloud', text: 'cloud'},
        { value: 'eye', text: 'eye'},
        { value: 'eye-invisible', text: 'eye-invisible'},
        { value: 'android', text: 'android'},
        { value: 'apple', text: 'apple'},
        { value: 'windows', text: 'windows'},
        { value: 'ie', text: 'ie'},
        { value: 'chrome', text: 'chrome'},
        { value: 'github', text: 'github'},
        { value: 'aliwangwang', text: 'aliwangwang'},
        { value: 'dingding', text: 'dingding'},
        { value: 'wechat', text: 'wechat'},
        { value: 'alipay', text: 'alipay'},
        { value: 'weibo-square', text: 'weibo-square'},
        { value: 'weibo-circle', text: 'weibo-circle'},
        { value: 'taobao-circle', text: 'taobao-circle'},
        { value: 'weibo', text: 'weibo'},
        { value: 'twitter', text: 'twitter'},
        { value: 'youtube', text: 'youtube'},
        { value: 'alipay-circle', text: 'alipay-circle'},
        { value: 'taobao', text: 'taobao'},
        { value: 'skype', text: 'skype'},
        { value: 'qq', text: 'qq'},
        { value: 'gitlab', text: 'gitlab'},
        { value: 'zhihu', text: 'zhihu'},
        { value: 'slack', text: 'slack'},
        { value: 'sketch', text: 'sketch'},
        { value: 'yahoo', text: 'yahoo'},
        { value: 'reddit', text: 'reddit'},
        { value: 'dribbble', text: 'dribbble'},
      ]
    },
    {
      type: 'text',
      key: 'tooltip',
      label: '提示信息',
      initVal: card.tooltip || '',
      tooltip: '鼠标悬浮时显示。',
      tooltip: '鼠标悬浮时显示。注:如使用动态信息,请在此处填写相应的字段名。',
      forbid: appType === 'mob',
      required: false
    },
    {
      type: 'select',
      key: 'format',
      label: '格式化',
      initVal: card.format || '',
      tooltip: '注:百分数、千分位对于数值类型有效,YYYY-MM-DD对于时间类型的文本有效。',
      type: 'radio',
      key: 'showType',
      label: '展现形式',
      initVal: card.showType || 'line',
      required: false,
      options: [
        { value: '', text: '无' },
        { value: 'percent', text: '百分数' },
        { value: 'thdSeparator', text: '千分位' },
        { value: 'YYYY-MM-DD', text: 'YYYY-MM-DD' }
      ]
    },
    {
      type: 'radio',
      key: 'align',
      label: '对齐方式',
      initVal: card.align || 'left',
      required: true,
      options: [
        { value: 'left', text: '左对齐' },
        { value: 'center', text: '居中' },
        { value: 'right', text: '右对齐' },
      ]
    },
    {
      type: 'number',
      key: 'fontSize',
      min: 12,
      max: 50,
      label: '字体大小',
      initVal: card.fontSize || 14,
      required: true,
    },
    {
      type: 'select',
      key: 'fontWeight',
      label: '字体粗细',
      initVal: card.fontWeight || 'normal',
      required: true,
      options: [
        { value: 'normal', text: '正常' },
        { value: 'bold', text: 'bold' },
        { value: 'bolder', text: 'bolder' },
        { value: 'lighter', text: 'lighter' },
        { value: '100', text: '100' },
        { value: '200', text: '200' },
        { value: '300', text: '300' },
        { value: '400', text: '400' },
        { value: '500', text: '500' },
        { value: '600', text: '600' },
        { value: '700', text: '700' },
        { value: '800', text: '800' },
        { value: '900', text: '900' }
        { value: 'line', text: '进度条' },
        { value: 'circle', text: '进度圈' },
        { value: 'dashboard', text: '仪表盘' },
      ]
    },
    {
      type: 'color',
      key: 'color',
      label: '颜色',
      initVal: card.color,
      tooltip: '进度条完成区域、分割线或二维码的颜色。',
      initVal: card.color || '#1890ff',
      required: true
    },
    {
      type: 'color',
      key: 'trailColor',
      label: '未完成颜色',
      initVal: card.trailColor || '#f5f5f5',
      required: false
    },
    {
      type: 'radio',
      key: 'showInfo',
      label: '进度值',
      initVal: card.showInfo || 'false',
      required: false,
      options: [
        { value: 'true', text: '显示' },
        { value: 'false', text: '隐藏' }
      ]
    },
    {
      type: 'color',
      key: 'infoColor',
      label: '进度值颜色',
      initVal: card.infoColor || 'rgba(0, 0, 0, 0.65)',
      required: false
    },
    {
      type: 'radio',
      key: 'strokeLinecap',
      label: '线型',
      initVal: card.strokeLinecap || 'round',
      required: false,
      options: [
        { value: 'round', text: '圆角' },
        { value: 'square', text: '直角' },
      ]
    },
    {
      type: 'radio',
      key: 'textAlign',
      label: '对齐方式',
      initVal: card.textAlign || 'left',
      required: false,
      options: [
        { value: 'left', text: '左' },
        { value: 'center', text: '中' },
        { value: 'right', text: '右' },
      ]
    },
    {
      type: 'number',
      key: 'strokeWidth',
      min: 1,
      max: 200,
      precision: 0,
      label: '线条宽度',
      initVal: card.strokeWidth || 8,
      required: true,
    },
    {
      type: 'number',
      key: 'outlineWidth',
      min: 10,
      max: 2000,
      precision: 0,
      label: '外形宽度',
      initVal: card.outlineWidth || '',
      tooltip: '外形宽度为空时,宽度为元素的宽度。注:超出时按元素宽度计算。',
      required: false
    },
    {
@@ -212,9 +331,9 @@
      min: 1,
      max: 24,
      precision: 0,
      label: '宽度',
      label: '元素宽度',
      initVal: card.width || 12,
      tooltip: '每行等分为24份。',
      tooltip: '栅格布局,每行等分为24列。',
      required: true
    },
    {
@@ -223,8 +342,78 @@
      min: 1,
      max: 10,
      label: '高度(行)',
      initVal: card.height || 1,
      initVal: card.height !== undefined ? card.height : 1,
      tooltip: '内容显示行数,值为空时高度自适应。',
      required: false
    },
    {
      type: 'select',
      key: 'bgImage',
      label: '动态背景',
      initVal: card.bgImage || '',
      tooltip: '绑定数据源字段,可根据返回值改变背景图。',
      required: false,
      allowClear: true,
      options: []
    },
    {
      type: 'cascader',
      key: 'anchors',
      label: '跳转锚点',
      initVal: card.anchors || [],
      tooltip: sessionStorage.getItem('appType') === 'mob' ? '注:小程序中无效' : '',
      required: false,
      options: anchors,
      forbid: !anchors
    },
    {
      type: 'number',
      key: 'barHeight',
      min: 5,
      max: 500,
      label: '高度',
      initVal: card.barHeight || 25,
      required: true,
    },
    {
      type: 'number',
      key: 'qrWidth',
      min: 5,
      max: 1000,
      label: '二维码尺寸',
      initVal: card.qrWidth || 50,
      required: true,
    },
    {
      type: 'number',
      key: 'interval',
      min: 0.1,
      max: 10,
      precision: 1,
      label: '线条间隔',
      initVal: card.interval || 1,
      required: true,
    },
    {
      type: 'radio',
      key: 'displayValue',
      label: '显示值',
      initVal: card.displayValue || 'false',
      required: false,
      options: [
        { value: 'true', text: '是' },
        { value: 'false', text: '否' }
      ]
    },
    {
      type: 'number',
      key: 'borderWidth',
      min: 0,
      max: 50,
      label: '线宽',
      initVal: card.borderWidth === undefined ? 1 : card.borderWidth,
      tooltip: '线宽为0时,为方便在开发时选中默认高度为10px,请注意调整内外边距。',
      required: true
    },
    {
      type: 'select',
@@ -234,28 +423,211 @@
      required: true,
      options: [
        { value: '1:1', text: '1:1' },
        { value: '4:3', text: '4:3' },
        { value: '3:2', text: '3:2' },
        { value: '16:9', text: '16:9' },
        { value: '2:1', text: '2:1' },
        { value: '3:1', text: '3:1' },
        { value: '4:1', text: '4:1' },
        { value: '5:1', text: '5:1' },
        { value: '6:1', text: '6:1' },
        { value: '7:1', text: '7:1' },
        { value: '8:1', text: '8:1' },
        { value: '9:1', text: '9:1' },
        { value: '10:1', text: '10:1' },
        { value: '3:4', text: '3:4' },
        { value: '2:3', text: '2:3' },
        { value: '9:16', text: '9:16' },
      ]
    },
    // {
    //   type: 'radio',
    //   key: 'backgroundSize',
    //   label: '图像大小',
    //   initVal: card.backgroundSize || 'cover',
    //   required: false,
    //   options: [
    //     { value: 'cover', text: '覆盖' },
    //     { value: 'contain', text: '包含' },
    //     { value: 'auto', text: '自适应' },
    //   ]
    // },
    {
      type: 'number',
      key: 'maxWidth',
      min: 10,
      max: 2000,
      label: '最大宽度',
      initVal: card.maxWidth || '',
      tooltip: '图片宽度的最大值。',
      help: '注:此值存在时,左右外边距为0居中显示。',
      required: false,
    },
    {
      type: 'select',
      key: 'aspectRatio',
      label: '长宽比',
      initVal: card.aspectRatio || '16:9',
      required: true,
      options: [
        { value: '4:3', text: '4:3' },
        { value: '16:9', text: '16:9' }
      ]
    },
    {
      type: 'radio',
      key: 'radius',
      label: '圆角',
      initVal: card.radius || 'false',
      key: 'link',
      label: '链接',
      initVal: card.link || '',
      tooltip: '动态地址为绑定字段值。',
      required: false,
      options: [
        { value: 'true', text: '有' },
        { value: 'false', text: '无' }
        { value: '', text: '无' },
        { value: 'dynamic', text: '动态' },
        { value: 'static', text: '静态' }
      ]
    },
    {
      type: 'text',
      key: 'padding',
      label: '内边距',
      initVal: card.padding,
      tooltip: '内边距需要按照固定格式填写,例:5px(上下左右均为5像素),5px 10px(上下5像素,左右10像素),5px 10px 15px(上5像素,左右10像素,下15像素),5px 10px 5px 10px(上5像素,右10像素,下5像素,左10像素)',
      type: 'radio',
      key: 'linkType',
      label: '链接类型',
      initVal: card.linkType || 'other',
      required: false,
      options: [
        { value: 'tel', text: '电话' },
        { value: 'email', text: '邮箱' },
        { value: 'other', text: '其他' }
      ]
    },
    {
      type: 'radio',
      key: 'scale',
      label: '图片放大',
      initVal: card.scale || 'false',
      required: false,
      options: [
        { value: 'false', text: '不可以' },
        { value: 'true', text: '可以' }
      ]
    },
    {
      type: 'select',
      key: 'linkurl',
      label: '链接地址',
      initVal: card.linkurl || '',
      required: true,
      options: []
    },
    {
      type: 'radio',
      key: 'joint',
      label: '拼接参数',
      initVal: card.joint || 'true',
      required: false,
      options: [{
        value: 'true',
        text: '是'
      }, {
        value: 'false',
        text: '否'
      }]
    },
    {
      type: 'radio',
      key: 'eval',
      label: '解析',
      initVal: card.eval || 'true',
      tooltip: '当公式内容涉及计算时请选择“是”,当公式内容为字段拼接时请选择“否”。',
      required: false,
      options: [{
        value: 'true',
        text: '是'
      }, {
        value: 'false',
        text: '否'
      }]
    },
    {
      type: 'textarea',
      key: 'formula',
      label: '公式',
      initVal: card.formula || '',
      tooltip: '执行时会使用查询到的数据替换相应的字段,展示获得的结果,在不使用解析时换行符或空格会替换为页面元素。可使用JS的一些语法,如:三元表达式 @field1@ > @field2@ ? 0 : 1;Math对象,取绝对值 Math.abs(@field@)、四舍五入 Math.round(@field@)等',
      placeholder: '例如:@price@ * @number@',
      required: true
    },
    {
      type: 'radio',
      key: 'noValue',
      label: '空值',
      initVal: card.noValue || 'show',
      tooltip: '当元素内容为空时,是否显示当前元素。注:数值类型元素包括数字0(非文本)。',
      required: false,
      options: [
        { value: 'show', text: '显示' },
        { value: 'hide', text: '隐藏' }
      ]
    },
    {
      type: 'radio',
      key: 'fixStyle',
      label: '前后缀',
      initVal: card.fixStyle || '',
      tooltip: '前缀与后缀,使用与内容统一的样式还是独立样式。',
      required: false,
      options: [
        { value: '', text: '统一样式' },
        { value: 'alone', text: '独立样式' }
      ]
    },
    {
      type: 'radio',
      key: 'copyable',
      label: '可复制',
      initVal: card.copyable || 'false',
      tooltip: '元素是否可复制,复制内容不包括前缀与后缀。',
      required: false,
      options: [
        { value: 'true', text: '是' },
        { value: 'false', text: '否' }
      ]
    },
    {
      type: 'number',
      key: 'fixSize',
      min: 10,
      max: 300,
      label: '字体大小',
      initVal: card.fixSize || 14,
      tooltip: '前缀、后缀的字体大小。',
      required: true
    },
    {
      type: 'color',
      key: 'fixColor',
      label: '字体颜色',
      initVal: card.fixColor || 'rgba(0, 0, 0, 0.65)',
      tooltip: '前缀、后缀的字体颜色。',
      required: true
    },
    {
      type: 'number',
      key: 'fixLeft',
      min: 0,
      max: 1000,
      label: '左边距',
      initVal: card.fixLeft || 0,
      tooltip: '前缀、后缀的左边距。',
      required: false
    },
    {
      type: 'number',
      key: 'fixRight',
      min: 0,
      max: 1000,
      label: '右边距',
      initVal: card.fixRight || 0,
      tooltip: '前缀、后缀的右边距。',
      required: false
    },
  ]