From 6eadc9df9afe7391cd8b58ab3c22aa689fc6679c Mon Sep 17 00:00:00 2001 From: zhou999 Date: Wed, 28 Sep 2022 22:09:46 +0800 Subject: [PATCH 01/18] =?UTF-8?q?feat:=20=E3=80=8C=E6=97=A5=E6=9C=9F?= =?UTF-8?q?=E8=8C=83=E5=9B=B4=E5=BF=AB=E6=8D=B7=E9=94=AE=E3=80=8D=E5=BF=AB?= =?UTF-8?q?=E6=8D=B7=E9=94=AE=E4=BC=98=E5=8C=96=E8=B0=83=E6=95=B4=20amis-s?= =?UTF-8?q?aas-7301?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Change-Id: Icc94132831faacb2730e532f5766f7da53084ab1 --- .../src/plugin/Form/InputDateRange.tsx | 14 +- .../src/renderer/DateShortCutControl.tsx | 350 ++++++++++-------- 2 files changed, 216 insertions(+), 148 deletions(-) diff --git a/packages/amis-editor/src/plugin/Form/InputDateRange.tsx b/packages/amis-editor/src/plugin/Form/InputDateRange.tsx index d2ab4e4b7..a188db456 100644 --- a/packages/amis-editor/src/plugin/Form/InputDateRange.tsx +++ b/packages/amis-editor/src/plugin/Form/InputDateRange.tsx @@ -307,7 +307,7 @@ export class DateRangeControlPlugin extends BasePlugin { }), getSchemaTpl('dateShortCutControl', { mode: 'normal', - dropDownOption: { + normalDropDownOption: { 'yesterday': '昨天', 'thisweek': '这个周', 'prevweek': '上周', @@ -317,6 +317,18 @@ export class DateRangeControlPlugin extends BasePlugin { 'thisquarter': '这个季度', 'prevquarter': '上个季度', 'thisyear': '今年' + }, + customDropDownOption: { + daysago: '最近n天', + dayslater: 'n天以内', + weeksago: '最近n周', + weekslater: 'n周以内', + monthsago: '最近n月', + monthslater: 'n月以内', + quartersago: '最近n季度', + quarterslater: 'n季度以内', + yearsago: '最近n年', + yearslater: 'n年以内' } }), // getSchemaTpl('remark'), diff --git a/packages/amis-editor/src/renderer/DateShortCutControl.tsx b/packages/amis-editor/src/renderer/DateShortCutControl.tsx index ec6d3c8e1..b564cf3f9 100644 --- a/packages/amis-editor/src/renderer/DateShortCutControl.tsx +++ b/packages/amis-editor/src/renderer/DateShortCutControl.tsx @@ -5,41 +5,71 @@ import React from 'react'; import cx from 'classnames'; import Sortable from 'sortablejs'; import {findDOMNode} from 'react-dom'; -import {FormItem, Button, Icon, InputBox} from 'amis'; +import {FormItem, Icon} from 'amis'; import type {FormControlProps} from 'amis-core'; import type {BaseEventContext} from 'amis-editor-core'; +import type {Option} from 'amis'; import {autobind} from 'amis-editor-core'; -import FormulaControl from './FormulaControl'; -const CustomType = 'custom'; - -type RangesType = Array; - -type DropDownOption = { +type $Object = { [key: string]: string; }; +enum RangeType { + Normal = 'Normal', + Custom = 'Custom' +} + export interface DateShortCutControlProps extends FormControlProps { className?: string; /** * 编辑器上下文数据,用于获取字段所在Form的其他字段 */ context: BaseEventContext; - dropDownOption: DropDownOption; + normalDropDownOption: $Object; + customDropDownOption: $Object; } interface OptionsType { - label: string; - type: string; - inputValue: string; + label?: string; + value: string; + type: RangeType; + inputType?: string; } interface DateShortCutControlState { options: Array; } +interface InputOption { + type: 'middle' | 'suffix', + prefix?: string, + suffix: string +} + +const ShortCutItemWrap = ( + props: { + index: number, + children: React.ReactNode, + handleDelete: (index: number, e: React.SyntheticEvent) => void + }) => { + return ( + <> + + + {props.children} + + props.handleDelete(props.index, e)}> + + + + ); +} + const klass = 'ae-DateShortCutControl'; export class DateShortCutControl extends React.PureComponent< @@ -49,10 +79,8 @@ export class DateShortCutControl extends React.PureComponent< sortable?: Sortable; drag?: HTMLElement | null; target: HTMLElement | null; - dropDownOptionArr: Array<{ - label: string; - value: string; - }>; + normalDropDownOptionArr: Array