@arkxos/arkos-system 0.1.0

package/src/admin/visual/js/component.config.js

@@ -0,0 +1,741 @@
+/*
+ * inputData 是否需要输入数据：true/false
+ * dataFieldType 字段类型：固定,动态
+ *
+ */
+import { commonStyle, fontStyle } from './common.config';
+import { echarts } from './echarts.config';
+import { form } from './form.config';
+import { app } from './app.config';
+import { list } from './list.config';
+import { menu } from './menu.config';
+
+export const components = [
+  {
+    name: '基础组件',
+    type: 'group',
+    children: [
+      {
+        type: 'container',
+        name: '容器',
+        eventList: '点击事件',
+        styleList: [
+          {
+            type: 'group',
+            name: '基础设置',
+            children: [
+              {
+                name: '打印区域',
+                fieldName: 'print',
+                fieldType: 'switch',
+                default: false,
+                options: [
+                  { value: '', key: true },
+                  { value: '', key: false }
+                ]
+              }
+            ]
+          },
+          ...commonStyle,
+        ]
+      },
+      {
+        type: 'row',
+        name: '分栏',
+        styleList: [
+          {
+            type: 'group',
+            name: '基础设置',
+            children: [
+              {
+                name: '行数',
+                fieldName: 'row',
+                fieldType: 'number',
+                default: 1,
+              },
+              {
+                name: '列数',
+                fieldName: 'col',
+                fieldType: 'buttons',
+                default: '2',
+                options: [
+                  { value: '1', key: '1' },
+                  { value: '2', key: '2' },
+                  { value: '3', key: '3' },
+                  { value: '4', key: '4' },
+                  { value: '5', key: '5' },
+                ]
+              },
+              {
+                name: '列占格数',
+                fieldName: 'span',
+                fieldType: 'multiple-number',
+                number: (data) => parseInt(data['col'] || '2'),
+                description: '每行占 24 格'
+              }
+            ]
+          }
+        ]
+      },
+      {
+        type: 'text',
+        name: '文本',
+        inputData: true,
+        fieldList: '内容',
+        eventList: '初始化事件,点击事件',
+        defaultObject: true,
+        styleList: [
+          {
+            type: 'group',
+            name: '基础设置',
+            children: [
+              {
+                name: '是否富文本',
+                fieldName: 'rich',
+                fieldType: 'switch',
+                default: false,
+                options: [
+                  { value: '', key: true },
+                  { value: '', key: false }
+                ],
+              },
+              {
+                name: '内容格式化',
+                fieldName: 'formatter',
+                fieldType: 'buttons',
+                default: '',
+                options: [
+                  { value: '无', key: '' },
+                  { value: '模板', key: 'template' },
+                  { value: '脚本', key: 'script' }
+                ],
+              },
+              {
+                name: '格式化模板',
+                fieldName: 'formatterTemplate',
+                fieldType: 'textarea',
+                show: data => data['formatter'] === 'template',
+                description: '内容标签：{value}，示例：￥{value}'
+              },
+              {
+                name: '格式化脚本',
+                fieldName: 'formatterScript',
+                fieldType: 'textarea',
+                show: data => data['formatter'] === 'script',
+                description: '内容参数：value，示例：value === "1" ? "1" : "2"'
+              },
+              ...fontStyle(),
+              {
+                name: '显示行数',
+                fieldName: 'limitLine',
+                fieldType: 'number',
+                description: '最多显示行数，超出时隐藏。'
+              }
+            ]
+          }
+        ]
+      },
+      {
+        type: 'image',
+        name: '图片',
+        inputData: true,
+        fieldList: '内容',
+        defaultObject: true,
+        eventList: '点击事件',
+        styleList: [
+          {
+            type: 'group',
+            name: '基础设置',
+            children: [
+              {
+                name: '宽度',
+                fieldName: 'width',
+                fieldType: 'input',
+                default: '100px'
+              },
+              {
+                name: '高度',
+                fieldName: 'height',
+                fieldType: 'input',
+                default: '100px'
+              },
+              {
+                name: '可否裁剪',
+                fieldName: 'cropper',
+                fieldType: 'switch',
+                default: false,
+                options: [
+                  { value: '', key: true },
+                  { value: '', key: false }
+                ]
+              },
+              {
+                name: '裁剪宽度',
+                fieldName: 'cropper.width',
+                fieldType: 'number',
+                default: 160,
+                show: data => data['cropper']
+              },
+              {
+                name: '裁剪高度',
+                fieldName: 'cropper.height',
+                fieldType: 'number',
+                default: 90,
+                show: data => data['cropper']
+              },
+              {
+                name: '默认图片',
+                fieldName: 'default',
+                fieldType: 'image',
+                width: 60,
+                height: 60
+              },
+              {
+                name: '显示边框',
+                fieldName: 'border',
+                fieldType: 'switch',
+                default: false,
+                options: [
+                  { value: '', key: true },
+                  { value: '', key: false }
+                ]
+              },
+              {
+                name: '是否只读',
+                fieldName: 'readonly',
+                fieldType: 'switch',
+                default: false,
+                options: [
+                  { value: '', key: true },
+                  { value: '', key: false }
+                ]
+              },
+              {
+                name: '可否预览',
+                fieldName: 'preview',
+                fieldType: 'switch',
+                default: false,
+                options: [
+                  { value: '', key: true },
+                  { value: '', key: false }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        type: 'video',
+        name: '视频',
+        inputData: true,
+        fieldList: '内容',
+        defaultObject: true,
+        styleList: [
+          {
+            type: 'group',
+            name: '基础设置',
+            children: [
+              {
+                name: '宽度',
+                fieldName: 'width',
+                fieldType: 'input',
+                default: '640px'
+              },
+              {
+                name: '高度',
+                fieldName: 'height',
+                fieldType: 'input',
+                default: '360px'
+              },
+            ]
+          }
+        ]
+      },
+      {
+        type: 'button',
+        name: '按钮',
+        eventList: '初始化事件,点击事件',
+        styleList: [
+          {
+            type: 'group',
+            name: '基础设置',
+            children: [
+              {
+                name: '按钮名称',
+                fieldName: 'buttonName',
+                fieldType: 'input',
+                default: '按钮',
+              },
+              {
+                name: '尺寸',
+                fieldName: 'size',
+                fieldType: 'buttons',
+                default: '',
+                options: [
+                  { value: '默认', key: '' },
+                  { value: '大型', key: 'large' },
+                  { value: '中型', key: 'default' },
+                  { value: '小型', key: 'small' }
+                ]
+              },
+              {
+                name: '类型',
+                fieldName: 'type',
+                fieldType: 'buttons',
+                default: 'primary',
+                options: [
+                  { value: '蓝色', key: 'primary' },
+                  { value: '绿色', key: 'success' },
+                  { value: '黄色', key: 'warning' },
+                  { value: '红色', key: 'danger' },
+                  { value: '灰色', key: 'info' }
+                ],
+              },
+              {
+                name: '样式',
+                fieldName: 'style',
+                fieldType: 'input',
+                default: '',
+                description: '示例：width: 100%'
+              },
+              {
+                name: '朴素按钮',
+                fieldName: 'plain',
+                fieldType: 'switch',
+                default: false,
+                options: [
+                  { value: '', key: true },
+                  { value: '', key: false }
+                ],
+                description: '是否为朴素按钮'
+              },
+              {
+                name: '文字按钮',
+                fieldName: 'text',
+                fieldType: 'switch',
+                default: false,
+                options: [
+                  { value: '', key: true },
+                  { value: '', key: false }
+                ],
+                description: '是否为文字按钮'
+              },
+              {
+                name: '圆角按钮',
+                fieldName: 'round',
+                fieldType: 'switch',
+                default: false,
+                options: [
+                  { value: '', key: true },
+                  { value: '', key: false }
+                ],
+                description: '是否为圆角按钮'
+              },
+              {
+                name: '圆形按钮',
+                fieldName: 'circle',
+                fieldType: 'switch',
+                default: false,
+                options: [
+                  { value: '', key: true },
+                  { value: '', key: false }
+                ],
+                description: '是否为圆形按钮'
+              },
+              {
+                name: '前缀图标',
+                fieldName: 'prefixIcon',
+                fieldType: 'icon-select',
+                size: '15px',
+                default: '',
+                description: '自定义前缀图标'
+              },
+              {
+                name: '后缀图标',
+                fieldName: 'suffixIcon',
+                fieldType: 'icon-select',
+                size: '15px',
+                default: '',
+                description: '自定义后缀图标'
+              },
+              {
+                name: '显示确认框',
+                fieldName: 'confirm',
+                fieldType: 'switch',
+                default: false,
+                options: [
+                  { value: '', key: true },
+                  { value: '', key: false }
+                ]
+              },
+              {
+                name: '确认框类型',
+                fieldName: 'confirmType',
+                fieldType: 'buttons',
+                default: 'info',
+                options: [
+                  { value: '成功', key: 'success' },
+                  { value: '信息', key: 'info' },
+                  { value: '告警', key: 'warning' },
+                  { value: '错误', key: 'error' },
+                ],
+                show: (data) => data['confirm'] === true
+              },
+              {
+                name: '确认框标题',
+                fieldName: 'confirmTitle',
+                fieldType: 'input',
+                show: (data) => data['confirm'] === true
+              },
+              {
+                name: '确认框内容',
+                fieldName: 'confirmContent',
+                fieldType: 'input',
+                show: (data) => data['confirm'] === true
+              },
+              {
+                name: '是否禁用',
+                fieldName: 'disabled',
+                fieldType: 'switch',
+                default: false,
+                options: [
+                  { value: '', key: true },
+                  { value: '', key: false }
+                ]
+              },
+              {
+                name: '需要授权',
+                fieldName: 'permit',
+                fieldType: 'switch',
+                default: false,
+                options: [
+                  { value: '', key: true },
+                  { value: '', key: false }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        type: 'tabs',
+        name: '标签页',
+        defaultStyle: {
+          display: 'flex',
+          'flex-direction': 'row',
+          'justify-content': 'flex-start',
+          height: '30px'
+        },
+        styleList: [
+          {
+            type: 'group',
+            name: '标签设置',
+            children: [
+              {
+                name: '标签间隔',
+                fieldName: 'gap',
+                fieldType: 'input',
+                default: '20px'
+              },
+              {
+                name: '标签名',
+                fieldName: 'tabsList',
+                fieldType: 'style-list',
+                showDialog: false,
+                options: [
+                  {
+                    name: '标签名',
+                    fieldName: 'name',
+                    fieldType: 'input'
+                  }
+                ],
+              }
+            ]
+          },
+          {
+            type: 'group',
+            name: '样式设置',
+            children: [
+              {
+                name: '未选中样式',
+                fieldName: 'styleList',
+                fieldType: 'style-list',
+                default: [
+                  {
+                    name: '未选中样式',
+                    fontColor: '#7D7E80',
+                    height: '30px',
+                    padding: '0,0,0,0',
+                    'justify-content': 'center',
+                    'align-items': 'center',
+                    display: 'flex',
+                    'flex-direction': 'column',
+                    'flex-shrink': '0'
+                  },
+                ],
+                defaultStyle: {
+                  fontColor: '#7D7E80',
+                  height: '30px',
+                  padding: '0,0,0,0',
+                  'justify-content': 'center',
+                  'align-items': 'center',
+                  display: 'flex',
+                  'flex-direction': 'column',
+                  'flex-shrink': '0'
+                },
+                options: [
+                  {
+                    type: 'group',
+                    name: '条件设置',
+                    children: [
+                      {
+                        fieldName: 'conditionList',
+                        fieldType: 'condition-list',
+                      }
+                    ]
+                  },
+                  {
+                    type: 'group',
+                    name: '字体样式',
+                    children: [
+                      ...fontStyle()
+                    ]
+                  },
+                  ...commonStyle
+                ],
+              },
+              {
+                name: '已选中样式',
+                fieldName: 'selected.styleList',
+                fieldType: 'style-list',
+                default: [
+                  {
+                    name: '已选中样式',
+                    fontColor: '#409EFF',
+                    height: '30px',
+                    padding: '0,0,0,0',
+                    'justify-content': 'center',
+                    'align-items': 'center',
+                    display: 'flex',
+                    'flex-direction': 'column',
+                    'flex-shrink': '0'
+                  },
+                ],
+                defaultStyle: {
+                  fontColor: '#409EFF',
+                  height: '30px',
+                  padding: '0,0,0,0',
+                  'justify-content': 'center',
+                  'align-items': 'center',
+                  display: 'flex',
+                  'flex-direction': 'column',
+                  'flex-shrink': '0',
+                },
+                options: [
+                  {
+                    type: 'group',
+                    name: '条件设置',
+                    children: [
+                      {
+                        fieldName: 'conditionList',
+                        fieldType: 'condition-list',
+                      }
+                    ]
+                  },
+                  {
+                    type: 'group',
+                    name: '字体样式',
+                    children: [
+                      ...fontStyle()
+                    ]
+                  },
+                  ...commonStyle
+                ],
+              }
+            ]
+          }
+        ]
+      },
+      {
+        type: 'search',
+        name: '查询框',
+        defaultObject: true,
+        defaultStyle: {
+          display: 'flex',
+          'flex-direction': 'row',
+          'justify-content': 'flex-start',
+          'align-items': 'center',
+          padding: '0,15,0,15',
+          width: '200px',
+          'radius-type': 'simple',
+          'border-radius': 20,
+          'border-type': 'simple',
+          'border-style': 'solid',
+          'border-width': 1,
+          'border-color': '#000000',
+        },
+        eventList: '初始化事件,点击查询事件',
+        styleList: [
+          {
+            name: '输入框',
+            type: 'group',
+            children: [
+              {
+                name: '提示内容',
+                fieldName: 'placeholder',
+                fieldType: 'input',
+                default: '请输入关键字'
+              },
+              {
+                name: '背景模式',
+                fieldName: 'bgMode',
+                fieldType: 'buttons',
+                options: '图片,线性,径向,颜色',
+                default: '颜色'
+              },
+            ]
+          },
+          ...commonStyle
+        ]
+      },
+      {
+        type: 'qrcode',
+        name: '二维码',
+        inputData: true,
+        fieldList: '内容',
+        defaultObject: true,
+        styleList: [
+          {
+            type: 'group',
+            name: '基础设置',
+            children: [
+              {
+                name: '宽度',
+                fieldName: 'width',
+                fieldType: 'input',
+                default: '100px'
+              },
+              {
+                name: '高度',
+                fieldName: 'height',
+                fieldType: 'input',
+                default: '100px'
+              }
+            ]
+          }
+        ]
+      },
+      {
+        type: 'router-view',
+        name: '路由页面',
+        styleList: commonStyle
+      },
+      {
+        type: 'data',
+        name: '数据加载组件',
+        inputData: true,
+        eventList: '数据加载事件',
+        styleList: []
+      }
+    ]
+  },
+  {
+    name: '通用组件',
+    type: 'group',
+    scene: '移动端',
+    children: app
+  },
+  {
+    name: '图表组件',
+    type: 'group',
+    scene: '相对,绝对,大屏,移动端',
+    children: echarts
+  },
+  {
+    name: '列表组件',
+    type: 'group',
+    children: list
+  },
+  {
+    name: '表单组件',
+    type: 'group',
+    children: form
+  },
+  {
+    name: '门户菜单组件',
+    type: 'group',
+    scene: '相对,绝对,大屏',
+    children: menu
+  },
+  {
+    name: '数据组件',
+    type: 'group',
+    scene: '相对,绝对,大屏',
+    children: [
+      {
+        name: '数据表',
+        type: 'edit-table',
+        formItem: '1',
+        styleList: [
+          {
+            type: 'group',
+            name: '基础设置',
+            children: [
+              {
+                name: '显示全选框',
+                fieldName: 'checkAll',
+                fieldType: 'switch',
+                default: true,
+                options: [
+                  { value: '', key: true },
+                  { value: '', key: false },
+                ],
+                description: '第一列显示多选框'
+              },
+              {
+                fieldName: 'stripe',
+                name: '显示斑马纹',
+                fieldType: 'switch',
+                default: true,
+                options: [
+                  { value: '', key: true },
+                  { value: '', key: false },
+                ],
+                description: '是否为斑马纹 table'
+              },
+              {
+                name: '纵向边框',
+                fieldName: 'border',
+                fieldType: 'switch',
+                default: true,
+                options: [
+                  { value: '', key: true },
+                  { value: '', key: false },
+                ],
+                description: '是否带有纵向边框'
+              },
+              {
+                fieldName: 'tooltip-effect',
+                name: '超长样式',
+                fieldType: 'buttons',
+                default: 'light',
+                showAll: false,
+                options: [
+                  { value: '白色', key: 'light' },
+                  { value: '黑色', key: 'dark' },
+                ],
+                description: '溢出的 tooltip 的 effect'
+              },
+              {
+                fieldName: 'columns',
+                name: '表格字段',
+                fieldType: 'fields',
+                default: []
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
+];