refactor: can configure the color of the option label for option type fields
This commit is contained in:
		
							parent
							
								
									778fb648ca
								
							
						
					
					
						commit
						65326a242a
					
				@ -10,7 +10,7 @@ import { toArr, isFn, isArr, FormPath } from '@formily/shared'
 | 
				
			|||||||
import { ArrayList, DragListView } from '@formily/react-shared-components'
 | 
					import { ArrayList, DragListView } from '@formily/react-shared-components'
 | 
				
			||||||
import { CircleButton } from '../circle-button'
 | 
					import { CircleButton } from '../circle-button'
 | 
				
			||||||
import { TextButton } from '../text-button'
 | 
					import { TextButton } from '../text-button'
 | 
				
			||||||
import { Table, Form } from 'antd'
 | 
					import { Table, Form, Button } from 'antd'
 | 
				
			||||||
import { FormItemShallowProvider } from '@formily/antd'
 | 
					import { FormItemShallowProvider } from '@formily/antd'
 | 
				
			||||||
import {
 | 
					import {
 | 
				
			||||||
  PlusOutlined,
 | 
					  PlusOutlined,
 | 
				
			||||||
@ -23,7 +23,7 @@ import styled from 'styled-components'
 | 
				
			|||||||
const ArrayComponents = {
 | 
					const ArrayComponents = {
 | 
				
			||||||
  CircleButton,
 | 
					  CircleButton,
 | 
				
			||||||
  TextButton,
 | 
					  TextButton,
 | 
				
			||||||
  AdditionIcon: () => <PlusOutlined style={{ fontSize: 20 }} />,
 | 
					  AdditionIcon: () => <><PlusOutlined/> 新增</>,
 | 
				
			||||||
  RemoveIcon: () => <DeleteOutlined />,
 | 
					  RemoveIcon: () => <DeleteOutlined />,
 | 
				
			||||||
  MoveDownIcon: () => <DownOutlined />,
 | 
					  MoveDownIcon: () => <DownOutlined />,
 | 
				
			||||||
  MoveUpIcon: () => <UpOutlined />
 | 
					  MoveUpIcon: () => <UpOutlined />
 | 
				
			||||||
 | 
				
			|||||||
@ -0,0 +1,40 @@
 | 
				
			|||||||
 | 
					import { connect } from '@formily/react-schema-renderer'
 | 
				
			||||||
 | 
					import React from 'react';
 | 
				
			||||||
 | 
					import { Select, Tag } from 'antd';
 | 
				
			||||||
 | 
					import {
 | 
				
			||||||
 | 
					  Select as AntdSelect,
 | 
				
			||||||
 | 
					  mapStyledProps,
 | 
				
			||||||
 | 
					  mapTextComponent
 | 
				
			||||||
 | 
					} from '../shared'
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					export const ColorSelect = connect({
 | 
				
			||||||
 | 
					  getProps: mapStyledProps,
 | 
				
			||||||
 | 
					  getComponent: mapTextComponent,
 | 
				
			||||||
 | 
					})((props) => {
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  const colors = {
 | 
				
			||||||
 | 
					    'red': '薄暮',
 | 
				
			||||||
 | 
					    'magenta': '法式洋红',
 | 
				
			||||||
 | 
					    'volcano': '火山',
 | 
				
			||||||
 | 
					    'orange': '日暮',
 | 
				
			||||||
 | 
					    'gold': '金盏花',
 | 
				
			||||||
 | 
					    'lime': '青柠',
 | 
				
			||||||
 | 
					    'green': '极光绿',
 | 
				
			||||||
 | 
					    'cyan': '明青',
 | 
				
			||||||
 | 
					    'blue': '拂晓蓝',
 | 
				
			||||||
 | 
					    'geekblue': '极客蓝',
 | 
				
			||||||
 | 
					    'purple': '酱紫',
 | 
				
			||||||
 | 
					  };
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  return (
 | 
				
			||||||
 | 
					    <Select {...props}>
 | 
				
			||||||
 | 
					      {Object.keys(colors).map(color => (
 | 
				
			||||||
 | 
					        <Select.Option value={color}>
 | 
				
			||||||
 | 
					          <Tag color={color}>{colors[color]}</Tag>
 | 
				
			||||||
 | 
					        </Select.Option>
 | 
				
			||||||
 | 
					      ))}
 | 
				
			||||||
 | 
					    </Select>
 | 
				
			||||||
 | 
					  )
 | 
				
			||||||
 | 
					})
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					export default ColorSelect
 | 
				
			||||||
@ -18,6 +18,7 @@ import { RemoteSelect } from './remote-select'
 | 
				
			|||||||
import { DrawerSelect } from './drawer-select'
 | 
					import { DrawerSelect } from './drawer-select'
 | 
				
			||||||
import { SubTable } from './sub-table'
 | 
					import { SubTable } from './sub-table'
 | 
				
			||||||
import { Icon } from './icons'
 | 
					import { Icon } from './icons'
 | 
				
			||||||
 | 
					import { ColorSelect } from './color-select'
 | 
				
			||||||
 | 
					
 | 
				
			||||||
export const setup = () => {
 | 
					export const setup = () => {
 | 
				
			||||||
  registerFormFields({
 | 
					  registerFormFields({
 | 
				
			||||||
@ -49,6 +50,7 @@ export const setup = () => {
 | 
				
			|||||||
    filter: Filter,
 | 
					    filter: Filter,
 | 
				
			||||||
    remoteSelect: RemoteSelect,
 | 
					    remoteSelect: RemoteSelect,
 | 
				
			||||||
    drawerSelect: DrawerSelect,
 | 
					    drawerSelect: DrawerSelect,
 | 
				
			||||||
 | 
					    colorSelect: ColorSelect,
 | 
				
			||||||
    subTable: SubTable,
 | 
					    subTable: SubTable,
 | 
				
			||||||
  })
 | 
					  })
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
				
			|||||||
@ -151,7 +151,7 @@ export function DataSourceField(props: any) {
 | 
				
			|||||||
    return value.map(val => {
 | 
					    return value.map(val => {
 | 
				
			||||||
      const item = items.find(item => item.value === val);
 | 
					      const item = items.find(item => item.value === val);
 | 
				
			||||||
      return (
 | 
					      return (
 | 
				
			||||||
        <Tag>
 | 
					        <Tag color={item.color}>
 | 
				
			||||||
          {item ? item.label : val}
 | 
					          {item ? item.label : val}
 | 
				
			||||||
        </Tag>
 | 
					        </Tag>
 | 
				
			||||||
      )
 | 
					      )
 | 
				
			||||||
@ -159,7 +159,7 @@ export function DataSourceField(props: any) {
 | 
				
			|||||||
  }
 | 
					  }
 | 
				
			||||||
  const item = items.find(item => item.value === value);
 | 
					  const item = items.find(item => item.value === value);
 | 
				
			||||||
  return (
 | 
					  return (
 | 
				
			||||||
    <Tag>
 | 
					    <Tag color={item.color}>
 | 
				
			||||||
      {item ? item.label : value}
 | 
					      {item ? item.label : value}
 | 
				
			||||||
    </Tag>
 | 
					    </Tag>
 | 
				
			||||||
  )
 | 
					  )
 | 
				
			||||||
 | 
				
			|||||||
@ -55,4 +55,36 @@
 | 
				
			|||||||
      width: 100% !important;
 | 
					      width: 100% !important;
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.data-source-table {
 | 
				
			||||||
 | 
					  .ant-table-thead .ant-table-cell {
 | 
				
			||||||
 | 
					    padding: 11px;
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					  .ant-table-tbody .ant-table-cell {
 | 
				
			||||||
 | 
					    padding: 0;
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					  .ant-form-item {
 | 
				
			||||||
 | 
					    margin-bottom: 0;
 | 
				
			||||||
 | 
					    .ant-btn {
 | 
				
			||||||
 | 
					      border: 0;
 | 
				
			||||||
 | 
					      box-shadow: none;
 | 
				
			||||||
 | 
					      background: none;
 | 
				
			||||||
 | 
					      margin-right: 0;
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					    .ant-form-item-explain.ant-form-item-explain-error {
 | 
				
			||||||
 | 
					      position: absolute;
 | 
				
			||||||
 | 
					      pointer-events: none;
 | 
				
			||||||
 | 
					      padding: 5px 11px;
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					  + .array-table-addition {
 | 
				
			||||||
 | 
					    border: 1px dashed #d9d9d9;
 | 
				
			||||||
 | 
					    text-align: center;
 | 
				
			||||||
 | 
					    border-radius: 2px !important;
 | 
				
			||||||
 | 
					    .ant-btn {
 | 
				
			||||||
 | 
					      display: block;
 | 
				
			||||||
 | 
					      width: 100%;
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
@ -226,6 +226,7 @@ export default {
 | 
				
			|||||||
      title: '每页显示几行数据',
 | 
					      title: '每页显示几行数据',
 | 
				
			||||||
      defaultValue: 50,
 | 
					      defaultValue: 50,
 | 
				
			||||||
      dataSource: [
 | 
					      dataSource: [
 | 
				
			||||||
 | 
					        {label: '10', value: 10},
 | 
				
			||||||
        {label: '20', value: 20},
 | 
					        {label: '20', value: 20},
 | 
				
			||||||
        {label: '50', value: 50},
 | 
					        {label: '50', value: 50},
 | 
				
			||||||
        {label: '100', value: 100},
 | 
					        {label: '100', value: 100},
 | 
				
			||||||
 | 
				
			|||||||
@ -1,4 +1,4 @@
 | 
				
			|||||||
import FieldModel from '../models/field';
 | 
					import FieldModel, { generateValueName } from '../models/field';
 | 
				
			||||||
import _ from 'lodash';
 | 
					import _ from 'lodash';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
export default async function (model: FieldModel, options) {
 | 
					export default async function (model: FieldModel, options) {
 | 
				
			||||||
@ -14,4 +14,14 @@ export default async function (model: FieldModel, options) {
 | 
				
			|||||||
      model.set('collection_name', target);
 | 
					      model.set('collection_name', target);
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  const dataSource = model.get('dataSource');
 | 
				
			||||||
 | 
					  if (Array.isArray(dataSource)) {
 | 
				
			||||||
 | 
					    model.set('dataSource', dataSource.map(item => {
 | 
				
			||||||
 | 
					      if (!item.value) {
 | 
				
			||||||
 | 
					        item.value = generateValueName();
 | 
				
			||||||
 | 
					      }
 | 
				
			||||||
 | 
					      return {...item};
 | 
				
			||||||
 | 
					    }));
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
				
			|||||||
@ -113,7 +113,7 @@ export const attachment = {
 | 
				
			|||||||
  options: {
 | 
					  options: {
 | 
				
			||||||
    interface: 'attachment',
 | 
					    interface: 'attachment',
 | 
				
			||||||
    type: 'belongsToMany',
 | 
					    type: 'belongsToMany',
 | 
				
			||||||
    filterable: true,
 | 
					    filterable: false,
 | 
				
			||||||
    target: 'attachments',
 | 
					    target: 'attachments',
 | 
				
			||||||
    // storage: {
 | 
					    // storage: {
 | 
				
			||||||
    //   name: 'local',
 | 
					    //   name: 'local',
 | 
				
			||||||
 | 
				
			|||||||
@ -13,6 +13,10 @@ interface FieldImportOptions extends SaveOptions {
 | 
				
			|||||||
  collectionName?: string;
 | 
					  collectionName?: string;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					export function generateValueName(title?: string): string {
 | 
				
			||||||
 | 
					  return `${Math.random().toString(36).replace('0.', '').slice(-4).padStart(4, '0')}`;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
export function generateFieldName(title?: string): string {
 | 
					export function generateFieldName(title?: string): string {
 | 
				
			||||||
  return `f_${Math.random().toString(36).replace('0.', '').slice(-4).padStart(4, '0')}`;
 | 
					  return `f_${Math.random().toString(36).replace('0.', '').slice(-4).padStart(4, '0')}`;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
				
			|||||||
@ -54,9 +54,43 @@ const transforms = {
 | 
				
			|||||||
      if (field.get('component.tooltip')) {
 | 
					      if (field.get('component.tooltip')) {
 | 
				
			||||||
        prop.description = field.get('component.tooltip');
 | 
					        prop.description = field.get('component.tooltip');
 | 
				
			||||||
      }
 | 
					      }
 | 
				
			||||||
      // if (field.get('name') === 'dataSource') {
 | 
					      if (field.get('name') === 'dataSource') {
 | 
				
			||||||
      //   set(prop, 'items.properties.value.visible', false);
 | 
					        
 | 
				
			||||||
      // }
 | 
					        set(prop, 'x-component-props.operationsWidth', 'auto');
 | 
				
			||||||
 | 
					        set(prop, 'x-component-props.bordered', true);
 | 
				
			||||||
 | 
					        set(prop, 'x-component-props.className', 'data-source-table');
 | 
				
			||||||
 | 
					        const properties = {};
 | 
				
			||||||
 | 
					        if (ctx.state.developerMode) {
 | 
				
			||||||
 | 
					          Object.assign(properties, {
 | 
				
			||||||
 | 
					            value: {
 | 
				
			||||||
 | 
					              type: "string",
 | 
				
			||||||
 | 
					              title: "值",
 | 
				
			||||||
 | 
					              // required: true,
 | 
				
			||||||
 | 
					              'x-component-props': {
 | 
				
			||||||
 | 
					                bordered: false,
 | 
				
			||||||
 | 
					              },
 | 
				
			||||||
 | 
					            },
 | 
				
			||||||
 | 
					          });
 | 
				
			||||||
 | 
					        }
 | 
				
			||||||
 | 
					        Object.assign(properties, {
 | 
				
			||||||
 | 
					          label: {
 | 
				
			||||||
 | 
					            type: "string",
 | 
				
			||||||
 | 
					            title: "选项",
 | 
				
			||||||
 | 
					            required: true,
 | 
				
			||||||
 | 
					            'x-component-props': {
 | 
				
			||||||
 | 
					              bordered: false,
 | 
				
			||||||
 | 
					            },
 | 
				
			||||||
 | 
					          },
 | 
				
			||||||
 | 
					          color: {
 | 
				
			||||||
 | 
					            type: "colorSelect",
 | 
				
			||||||
 | 
					            title: "颜色",
 | 
				
			||||||
 | 
					            'x-component-props': {
 | 
				
			||||||
 | 
					              bordered: false,
 | 
				
			||||||
 | 
					            },
 | 
				
			||||||
 | 
					          },
 | 
				
			||||||
 | 
					        });
 | 
				
			||||||
 | 
					        set(prop, 'items.properties', properties);
 | 
				
			||||||
 | 
					      }
 | 
				
			||||||
      if (['number', 'percent'].includes(interfaceType) && field.get('precision')) {
 | 
					      if (['number', 'percent'].includes(interfaceType) && field.get('precision')) {
 | 
				
			||||||
        set(prop, 'x-component-props.step', field.get('precision'));
 | 
					        set(prop, 'x-component-props.step', field.get('precision'));
 | 
				
			||||||
      }
 | 
					      }
 | 
				
			||||||
 | 
				
			|||||||
		Loading…
	
		Reference in New Issue
	
	Block a user