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 { CircleButton } from '../circle-button'
 | 
			
		||||
import { TextButton } from '../text-button'
 | 
			
		||||
import { Table, Form } from 'antd'
 | 
			
		||||
import { Table, Form, Button } from 'antd'
 | 
			
		||||
import { FormItemShallowProvider } from '@formily/antd'
 | 
			
		||||
import {
 | 
			
		||||
  PlusOutlined,
 | 
			
		||||
@ -23,7 +23,7 @@ import styled from 'styled-components'
 | 
			
		||||
const ArrayComponents = {
 | 
			
		||||
  CircleButton,
 | 
			
		||||
  TextButton,
 | 
			
		||||
  AdditionIcon: () => <PlusOutlined style={{ fontSize: 20 }} />,
 | 
			
		||||
  AdditionIcon: () => <><PlusOutlined/> 新增</>,
 | 
			
		||||
  RemoveIcon: () => <DeleteOutlined />,
 | 
			
		||||
  MoveDownIcon: () => <DownOutlined />,
 | 
			
		||||
  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 { SubTable } from './sub-table'
 | 
			
		||||
import { Icon } from './icons'
 | 
			
		||||
import { ColorSelect } from './color-select'
 | 
			
		||||
 | 
			
		||||
export const setup = () => {
 | 
			
		||||
  registerFormFields({
 | 
			
		||||
@ -49,6 +50,7 @@ export const setup = () => {
 | 
			
		||||
    filter: Filter,
 | 
			
		||||
    remoteSelect: RemoteSelect,
 | 
			
		||||
    drawerSelect: DrawerSelect,
 | 
			
		||||
    colorSelect: ColorSelect,
 | 
			
		||||
    subTable: SubTable,
 | 
			
		||||
  })
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@ -151,7 +151,7 @@ export function DataSourceField(props: any) {
 | 
			
		||||
    return value.map(val => {
 | 
			
		||||
      const item = items.find(item => item.value === val);
 | 
			
		||||
      return (
 | 
			
		||||
        <Tag>
 | 
			
		||||
        <Tag color={item.color}>
 | 
			
		||||
          {item ? item.label : val}
 | 
			
		||||
        </Tag>
 | 
			
		||||
      )
 | 
			
		||||
@ -159,7 +159,7 @@ export function DataSourceField(props: any) {
 | 
			
		||||
  }
 | 
			
		||||
  const item = items.find(item => item.value === value);
 | 
			
		||||
  return (
 | 
			
		||||
    <Tag>
 | 
			
		||||
    <Tag color={item.color}>
 | 
			
		||||
      {item ? item.label : value}
 | 
			
		||||
    </Tag>
 | 
			
		||||
  )
 | 
			
		||||
 | 
			
		||||
@ -56,3 +56,35 @@
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.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: '每页显示几行数据',
 | 
			
		||||
      defaultValue: 50,
 | 
			
		||||
      dataSource: [
 | 
			
		||||
        {label: '10', value: 10},
 | 
			
		||||
        {label: '20', value: 20},
 | 
			
		||||
        {label: '50', value: 50},
 | 
			
		||||
        {label: '100', value: 100},
 | 
			
		||||
 | 
			
		||||
@ -1,4 +1,4 @@
 | 
			
		||||
import FieldModel from '../models/field';
 | 
			
		||||
import FieldModel, { generateValueName } from '../models/field';
 | 
			
		||||
import _ from 'lodash';
 | 
			
		||||
 | 
			
		||||
export default async function (model: FieldModel, options) {
 | 
			
		||||
@ -14,4 +14,14 @@ export default async function (model: FieldModel, options) {
 | 
			
		||||
      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: {
 | 
			
		||||
    interface: 'attachment',
 | 
			
		||||
    type: 'belongsToMany',
 | 
			
		||||
    filterable: true,
 | 
			
		||||
    filterable: false,
 | 
			
		||||
    target: 'attachments',
 | 
			
		||||
    // storage: {
 | 
			
		||||
    //   name: 'local',
 | 
			
		||||
 | 
			
		||||
@ -13,6 +13,10 @@ interface FieldImportOptions extends SaveOptions {
 | 
			
		||||
  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 {
 | 
			
		||||
  return `f_${Math.random().toString(36).replace('0.', '').slice(-4).padStart(4, '0')}`;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@ -54,9 +54,43 @@ const transforms = {
 | 
			
		||||
      if (field.get('component.tooltip')) {
 | 
			
		||||
        prop.description = field.get('component.tooltip');
 | 
			
		||||
      }
 | 
			
		||||
      // if (field.get('name') === 'dataSource') {
 | 
			
		||||
      //   set(prop, 'items.properties.value.visible', false);
 | 
			
		||||
      // }
 | 
			
		||||
      if (field.get('name') === 'dataSource') {
 | 
			
		||||
        
 | 
			
		||||
        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')) {
 | 
			
		||||
        set(prop, 'x-component-props.step', field.get('precision'));
 | 
			
		||||
      }
 | 
			
		||||
 | 
			
		||||
		Loading…
	
		Reference in New Issue
	
	Block a user