Merge pull request #250 from sunshineLixun/dev

sendya · web-flow · commit 1127fa65988c · 2022-10-25T11:57:01.000+08:00
feat: DatePicker
diff --git a/packages/pro-field/src/components/DatePicker/index.tsx b/packages/pro-field/src/components/DatePicker/index.tsx
@@ -0,0 +1,77 @@
+import { defineComponent, type App, DefineComponent, Plugin } from 'vue';
+import Dayjs from 'dayjs';
+import { fieldDatePickerProps, FieldDatePickerProps } from './types';
+import { DatePicker } from 'ant-design-vue';
+import { getSlot } from '@ant-design-vue/pro-utils';
+import type { VueNode } from 'ant-design-vue/lib/_util/type';
+
+const formatDate = (text: any, format: any) => {
+  if (!text) {
+    return '-';
+  }
+  if (typeof format === 'function') {
+    return format(Dayjs(text));
+  } else {
+    return Dayjs(text).format(format || 'YYYY-MM-DD');
+  }
+};
+
+export const slots = ['suffixIcon', 'prevIcon', 'nextIcon', 'superPrevIcon', 'superNextIcon'];
+
+const FieldDatePicker = defineComponent({
+  name: 'FieldDatePicker',
+  inheritAttrs: false,
+  props: fieldDatePickerProps,
+  slots,
+  setup(props, { slots }) {
+    const suffixIcon = getSlot<() => VueNode>(slots, props.fieldProps as Record<string, any>, 'suffixIcon');
+    const prevIcon = getSlot<() => VueNode>(slots, props.fieldProps as Record<string, any>, 'prevIcon');
+    const nextIcon = getSlot<() => VueNode>(slots, props.fieldProps as Record<string, any>, 'nextIcon');
+    const superPrevIcon = getSlot<() => VueNode>(slots, props.fieldProps as Record<string, any>, 'superPrevIcon');
+    const superNextIcon = getSlot<() => VueNode>(slots, props.fieldProps as Record<string, any>, 'superNextIcon');
+
+    const render = getSlot(slots, props.fieldProps as Record<string, any>, 'render') as any;
+    const renderFormItem = getSlot(slots, props.fieldProps as Record<string, any>, 'renderFormItem') as any;
+
+    return () => {
+      const { mode, text, dateFormat, fieldProps } = props;
+      const { placeholder, format } = fieldProps || {};
+
+      if (mode === 'read') {
+        const dom = formatDate(text, format || dateFormat);
+        if (render) {
+          return render(text, { mode, ...fieldProps }, <>{dom}</>);
+        }
+        return <>{dom}</>;
+      }
+      if (mode === 'edit' || mode === 'update') {
+        const dom = (
+          <DatePicker
+            v-slots={{
+              suffixIcon,
+              prevIcon,
+              nextIcon,
+              superPrevIcon,
+              superNextIcon,
+            }}
+            {...fieldProps}
+            placeholder={placeholder || '请选择'}
+            allowClear
+          />
+        );
+        if (renderFormItem) {
+          return renderFormItem(text, { mode, ...fieldProps }, dom);
+        }
+        return dom;
+      }
+      return null;
+    };
+  },
+});
+
+FieldDatePicker.install = (app: App) => {
+  app.component(FieldDatePicker.name, FieldDatePicker);
+  return app;
+};
+
+export default FieldDatePicker as DefineComponent<FieldDatePickerProps> & Plugin;
diff --git a/packages/pro-field/src/components/DatePicker/types.ts b/packages/pro-field/src/components/DatePicker/types.ts
@@ -0,0 +1,16 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { CommonProps, DatePickerProps } from 'ant-design-vue/es/date-picker/generatePicker/props';
+import { proFieldFC } from '../typings';
+
+export const fieldDatePickerProps = {
+  ...proFieldFC,
+  /** 日期格式化 */
+  dateFormat: {
+    type: String,
+  },
+  fieldProps: {
+    type: Object as PropType<CommonProps<any> & DatePickerProps<any>>,
+  },
+};
+
+export type FieldDatePickerProps = Partial<ExtractPropTypes<typeof fieldDatePickerProps>>;
diff --git a/packages/pro-field/src/components/Password/index.tsx b/packages/pro-field/src/components/Password/index.tsx
@@ -11,6 +11,7 @@ const FieldPassword = defineComponent({
   setup(props, { slots }) {
     return () => {
       const { mode, text, fieldProps } = props;
+      const placeholder = fieldProps.placeholder || '请输入';
       const render = props.render ?? slots.render;
       const renderFormItem = props.renderFormItem ?? slots?.renderFormItem;
 
@@ -34,7 +35,7 @@ const FieldPassword = defineComponent({
         return dom;
       }
       if (mode === 'edit' || mode === 'update') {
-        const renderDom = <InputPassword allowClear {...props.fieldProps} />;
+        const renderDom = <InputPassword {...props.fieldProps} allowClear placeholder={placeholder} />;
         if (renderFormItem) {
           return renderFormItem(text, { mode, fieldProps }, renderDom);
         }
diff --git a/packages/pro-field/src/components/Select/SearchSelect/index.tsx b/packages/pro-field/src/components/Select/SearchSelect/index.tsx
@@ -3,38 +3,14 @@ import { Select } from 'ant-design-vue';
 import { searchSelectProps } from './types';
 import { getSlot } from '@ant-design-vue/pro-utils';
 
-export const slots = [
-  'notFoundContent',
-  'suffixIcon',
-  'itemIcon',
-  'removeIcon',
-  'clearIcon',
-  'dropdownRender',
-  'option',
-  'placeholder',
-  'tagRender',
-  'maxTagPlaceholder',
-  'optionLabel',
-  'default',
-];
+export const slots = ['default'];
 
 const SearchSelect = defineComponent({
   props: searchSelectProps,
   slots,
   setup(props, { slots }) {
     const searchValue = ref(props.searchValue);
 
-    const notFoundContent = getSlot(slots, props, 'notFoundContent');
-    const suffixIcon = getSlot(slots, props, 'suffixIcon');
-    const itemIcon = getSlot(slots, props, 'itemIcon');
-    const removeIcon = getSlot(slots, props, 'removeIcon');
-    const clearIcon = getSlot(slots, props, 'clearIcon');
-    const dropdownRender = getSlot(slots, props, 'dropdownRender');
-    const option = getSlot(slots, props, 'option');
-    const placeholder = getSlot(slots, props, 'placeholder');
-    const tagRender = getSlot(slots, props, 'tagRender');
-    const maxTagPlaceholder = getSlot(slots, props, 'maxTagPlaceholder');
-    const optionLabel = getSlot(slots, props, 'optionLabel');
     const children = getSlot(slots, props, 'default');
 
     return () => {
@@ -43,6 +19,7 @@ const SearchSelect = defineComponent({
         labelInValue,
         autoClearSearchValue = true,
         showSearch,
+        placeholder,
         onSearch,
         onClear,
         fetchData,
@@ -52,22 +29,12 @@ const SearchSelect = defineComponent({
       return (
         <Select
           v-slots={{
-            notFoundContent,
-            suffixIcon,
-            itemIcon,
-            removeIcon,
-            clearIcon,
-            dropdownRender,
-            option,
-            placeholder,
-            tagRender,
-            maxTagPlaceholder,
-            optionLabel,
             default: children,
           }}
           autoClearSearchValue={autoClearSearchValue}
           {...restProps}
           allowClear
+          placeholder={placeholder || '请选择'}
           searchValue={searchValue.value}
           onClear={() => {
             onClear?.();
diff --git a/packages/pro-field/src/components/Text/index.tsx b/packages/pro-field/src/components/Text/index.tsx
@@ -1,16 +1,17 @@
 import { defineComponent, type App, type Plugin, type DefineComponent } from 'vue';
 import { Input } from 'ant-design-vue';
-import { textFieldPorps, type TextFieldPorps } from './types';
+import { textFieldProps, type TextFieldProps } from './types';
 import 'ant-design-vue/es/input/style/index.less';
 
 const FieldText = defineComponent({
   name: 'FieldText',
   inheritAttrs: false,
-  props: textFieldPorps,
+  props: textFieldProps,
   slots: ['render', 'renderFormItem'],
   setup(props, { slots }) {
     return () => {
       const { type, mode, text, emptyText, fieldProps } = props;
+      const placeholder = fieldProps.placeholder || '请输入';
       const render = props.render ?? slots?.render;
       const renderFormItem = props.renderFormItem ?? slots?.renderFormItem;
       if (mode === 'read') {
@@ -27,7 +28,7 @@ const FieldText = defineComponent({
         return dom;
       }
       if (mode === 'edit' || mode === 'update') {
-        const renderDom = <Input type={type} allowClear {...fieldProps} />;
+        const renderDom = <Input {...fieldProps} type={type} allowClear placeholder={placeholder} />;
         if (renderFormItem) {
           return renderFormItem(text, { mode, fieldProps }, renderDom);
         }
@@ -43,4 +44,4 @@ FieldText.install = (app: App) => {
   return app;
 };
 
-export default FieldText as DefineComponent<TextFieldPorps> & Plugin;
+export default FieldText as DefineComponent<TextFieldProps> & Plugin;
diff --git a/packages/pro-field/src/components/Text/types.ts b/packages/pro-field/src/components/Text/types.ts
@@ -3,7 +3,7 @@ import type { InputProps } from 'ant-design-vue/es/input/inputProps';
 import type { VueNode } from '@ant-design-vue/pro-utils';
 import { proFieldFC } from '../typings';
 
-export const textFieldPorps = {
+export const textFieldProps = {
   ...proFieldFC,
   // 这里预留一个原生的input type属性
   type: {
@@ -15,4 +15,4 @@ export const textFieldPorps = {
   },
 };
 
-export type TextFieldPorps = Partial<ExtractPropTypes<typeof textFieldPorps>>;
+export type TextFieldProps = Partial<ExtractPropTypes<typeof textFieldProps>>;
diff --git a/packages/pro-field/src/index.tsx b/packages/pro-field/src/index.tsx
@@ -47,18 +47,21 @@ export {
 };
 
 // pro-field
-import { textFieldPorps, type TextFieldPorps } from './components/Text/types';
+import { textFieldProps, type TextFieldProps } from './components/Text/types';
 import FieldText from './components/Text';
-export { FieldText, textFieldPorps, type TextFieldPorps };
+export { FieldText, textFieldProps, type TextFieldProps };
 
 import { passwordTextProps, type PasswordTextProps } from './components/Password/types';
 import FieldPassword from './components/Password';
 export { FieldPassword, passwordTextProps, type PasswordTextProps };
 
 import { searchSelectProps, type SearchSelectProps } from './components/Select/SearchSelect/types';
 import FieldSelect from './components/Select';
-import { slots as searchSelectSlots } from './components/Select/SearchSelect';
-export { FieldSelect, searchSelectProps, searchSelectSlots, type SearchSelectProps };
+export { FieldSelect, searchSelectProps, type SearchSelectProps };
+
+import { fieldDatePickerProps, type FieldDatePickerProps } from './components/DatePicker/types';
+import FieldDatePicker, { slots as fieldDatePickerSlots } from './components/DatePicker';
+export { FieldDatePicker, fieldDatePickerProps, fieldDatePickerSlots, FieldDatePickerProps };
 
 // style
 import './default.less';
@@ -100,6 +103,21 @@ const defaultRenderText = (
   props: RenderProps
   // valueTypeMap: Record<string, ProRenderFieldPropsType>
 ): VueNode => {
+  if (valueType === 'date') {
+    const { fieldProps } = props;
+    return (
+      <FieldDatePicker
+        dateFormat="YYYY-MM-DD"
+        fieldProps={{
+          ...fieldProps,
+          mode: 'date',
+          picker: 'date',
+        }}
+        {...props}
+        text={dataValue as string}
+      />
+    );
+  }
   if (valueType === 'select') {
     let text = '';
     if (dataValue instanceof Array) {
@@ -143,7 +161,7 @@ const ProField = defineComponent({
       const omitFieldProps = omitUndefined({
         ...fieldProps,
         value: unref(inputValue),
-        'onUpdate:value'(value: string) {
+        'onUpdate:value'(value: any) {
           inputValue.value = value;
           fieldProps?.['onUpdate:value']?.(value);
         },
diff --git a/packages/pro-form/examples/views/ProForm.vue b/packages/pro-form/examples/views/ProForm.vue
@@ -139,25 +139,40 @@
       name="lang"
       label="语言"
       :field-props="{
-        placeholder: '请选择',
+        placeholder: '请选择语言',
       }"
     >
       <SelectOption v-for="lang in langs" :key="lang.value" :value="lang.value">
         <span role="img" :aria-label="lang.value">{{ lang.icon }}</span
         >&nbsp;&nbsp;{{ lang.label }}</SelectOption
       >
+      <template #suffixIcon>
+        <plus-outlined />
+      </template>
     </pro-form-select>
     <pro-form-select
       name="country"
       label="国家"
       :field-props="{
-        placeholder: '请选择',
         showSearch: true,
         mode: 'multiple',
         filterOption: false,
       }"
       :request="fetchUser"
-    />
+    >
+      <template #placeholder> 请选择国家 </template>
+    </pro-form-select>
+    <pro-form-date-picker
+      name="expirationTime"
+      label="合同失效时间"
+      :field-props="{
+        placeholder: '请选择合同失效时间',
+      }"
+    >
+      <template #superPrevIcon>
+        <plus-outlined />
+      </template>
+    </pro-form-date-picker>
   </pro-form>
 </template>
 
@@ -166,7 +181,7 @@ import { reactive, ref, FunctionalComponent } from 'vue';
 import { PlusOutlined } from '@ant-design/icons-vue';
 import { RadioGroup, RadioButton, Switch, Divider, SelectOption, type SelectProps } from 'ant-design-vue';
 import type { FormLayout } from 'ant-design-vue/es/form/Form';
-import { ProForm, ProFormText, ProFormPassword, ProFormSelect } from '@ant-design-vue/pro-form';
+import { ProForm, ProFormText, ProFormPassword, ProFormSelect, ProFormDatePicker } from '@ant-design-vue/pro-form';
 
 let lastFetchId = 0;
 
@@ -201,6 +216,7 @@ const formModel = reactive({
   girlName: undefined,
   lang: undefined,
   country: undefined,
+  expirationTime: undefined,
 });
 
 const sex = ref([
diff --git a/packages/pro-form/src/BaseForm/hooks/useFormMethods.ts b/packages/pro-form/src/BaseForm/hooks/useFormMethods.ts
@@ -1,4 +1,3 @@
-import { toRaw, isProxy } from 'vue';
 import { proxyToRaw } from '@ant-design-vue/pro-utils';
 import type { Recordable } from '../../typings';
 
diff --git a/packages/pro-form/src/components/DatePicker/DatePicker.tsx b/packages/pro-form/src/components/DatePicker/DatePicker.tsx
diff --git a/packages/pro-form/src/components/Select/index.tsx b/packages/pro-form/src/components/Select/index.tsx
diff --git a/packages/pro-form/src/components/index.ts b/packages/pro-form/src/components/index.ts
diff --git a/packages/utils/src/proxyToRaw/index.ts b/packages/utils/src/proxyToRaw/index.ts

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,3 @@`
`1`		`-import { toRaw, isProxy } from 'vue';`
`2`	`1`	`import { proxyToRaw } from '@ant-design-vue/pro-utils';`
`3`	`2`	`import type { Recordable } from '../../typings';`
`4`	`3`