refactor: Select Text Password

sunshineLixun · Sep 21, 2022 · f0dd93b · f0dd93b
1 parent d2a0f49
commit f0dd93b
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 39 deletions.
diff --git a/packages/pro-field/src/components/Password/index.tsx b/packages/pro-field/src/components/Password/index.tsx
@@ -10,32 +10,33 @@ const FieldPassword = defineComponent({
   slots: ['render', 'renderFormItem'],
   setup(props, { slots }) {
     return () => {
+      const { mode, text, fieldProps } = props;
       const render = props.render ?? slots.render;
       const renderFormItem = props.renderFormItem ?? slots?.renderFormItem;
 
       const visible = ref(props.visible);
 
-      if (props.mode === 'read') {
+      if (mode === 'read') {
         let dom = <>-</>;
-        if (props.text) {
+        if (text) {
           dom = (
             <Space>
-              <span>{visible.value ? props.text : '＊ ＊ ＊ ＊ ＊'}</span>
+              <span>{visible.value ? text : '＊ ＊ ＊ ＊ ＊'}</span>
               <a onClick={() => (visible.value = !visible.value)}>
                 {visible.value ? <EyeOutlined /> : <EyeInvisibleOutlined />}
               </a>
             </Space>
           );
         }
         if (render) {
-          return render(props.text, { mode: props.mode, fieldProps: props.fieldProps }, dom);
+          return render(text, { mode, fieldProps }, dom);
         }
         return dom;
       }
-      if (props.mode === 'edit' || props.mode === 'update') {
+      if (mode === 'edit' || mode === 'update') {
         const renderDom = <InputPassword allowClear {...props.fieldProps} />;
         if (renderFormItem) {
-          return renderFormItem(props.text, { mode: props.mode, ...props.fieldProps }, renderDom);
+          return renderFormItem(text, { mode, fieldProps }, renderDom);
         }
         return renderDom;
       }

diff --git a/packages/pro-field/src/components/Text/index.tsx b/packages/pro-field/src/components/Text/index.tsx
@@ -9,27 +9,27 @@ const FieldText = defineComponent({
   props: textFieldPorps,
   slots: ['render', 'renderFormItem'],
   setup(props, { slots }) {
-    const render = props.render ?? slots?.render;
-    const renderFormItem = props.renderFormItem ?? slots?.renderFormItem;
-
     return () => {
-      if (props.mode === 'read') {
+      const { type, mode, text, emptyText, fieldProps } = props;
+      const render = props.render ?? slots?.render;
+      const renderFormItem = props.renderFormItem ?? slots?.renderFormItem;
+      if (mode === 'read') {
         const dom = (
           <>
-            {props.fieldProps?.prefix}
-            {props.text ?? (props.emptyText || '-')}
-            {props.fieldProps?.suffix}
+            {fieldProps?.prefix}
+            {text ?? (emptyText || '-')}
+            {fieldProps?.suffix}
           </>
         );
         if (render) {
-          return render(props.text, { mode: props.mode, fieldProps: props.fieldProps }, dom) ?? props.emptyText;
+          return render(text, { mode, fieldProps }, dom) ?? emptyText;
         }
         return dom;
       }
-      if (props.mode === 'edit' || props.mode === 'update') {
-        const renderDom = <Input type={props.type} allowClear {...props.fieldProps} />;
+      if (mode === 'edit' || mode === 'update') {
+        const renderDom = <Input type={type} allowClear {...fieldProps} />;
         if (renderFormItem) {
-          return renderFormItem(props.text, { mode: props.mode, fieldProps: props.fieldProps }, renderDom);
+          return renderFormItem(text, { mode, fieldProps }, renderDom);
         }
         return renderDom;
       }

diff --git a/packages/pro-field/src/index.tsx b/packages/pro-field/src/index.tsx
@@ -1,7 +1,8 @@
 import {
-  ref,
+  unref,
   defineComponent,
   PropType,
+  ref,
   ExtractPropTypes,
   VNode,
   type App,
@@ -11,6 +12,7 @@ import {
 import { pickProProps, omitUndefined } from '@ant-design-vue/pro-utils';
 import { isValidElement } from 'ant-design-vue/es/_util/props-util';
 import { cloneVNodes } from 'ant-design-vue/es/_util/vnode';
+import { warning } from 'ant-design-vue/es/vc-util/warning';
 import { omit } from 'lodash-es';
 import type { NameType } from './components/typings';
 
@@ -105,39 +107,55 @@ const ProField = defineComponent({
   inheritAttrs: false,
   props: proFieldProps,
   setup(props) {
-    const inputValue = ref((props.formItemProps?.model || {})[props.formItemProps?.name as NameType]);
-    const formItemProps = omitUndefined(props?.formItemProps || {});
     return () => {
+      const { readonly, mode, text, valueType, formItemProps, fieldProps, renderFormItem } = props;
+      const formItemName = formItemProps?.name as NameType;
+      const formModel = formItemProps?.model;
+      if (!formModel) {
+        warning(false, 'model is required for validateFields to work.');
+        return Promise.reject('Form `model` is required for validateFields to work.');
+      }
+      const modelValue = formModel[formItemName];
+
+      if (!(formItemName in Object.keys(formModel))) {
+        warning(
+          false,
+          `The ${formItemName} attribute was not found in the model of the Form, Please set the name attribute of the form item correctly`
+        );
+      }
+      const inputValue = ref(modelValue);
+      const omitFormItemProps = omitUndefined(formItemProps || {});
+
       // TODO：待优化
-      const fieldProps = omitUndefined({
-        ...props?.fieldProps,
-        value: inputValue.value,
+      const omitFieldProps = omitUndefined({
+        ...fieldProps,
+        value: unref(inputValue),
         'onUpdate:value'(value: string) {
           inputValue.value = value;
-          props.fieldProps?.['onUpdate:value']?.(value);
+          fieldProps?.['onUpdate:value']?.(value);
         },
       });
       return (
         <>
           {defaultRenderText(
-            props.mode === 'edit' ? fieldProps?.value ?? props.text ?? '' : props.text ?? fieldProps?.value ?? '',
-            props.valueType || 'text',
+            mode === 'edit' ? omitFieldProps?.value ?? text ?? '' : text ?? omitFieldProps?.value ?? '',
+            valueType || 'text',
             {
               ...props,
-              mode: props.readonly ? 'read' : props.mode,
-              renderFormItem: props.renderFormItem
+              mode: readonly ? 'read' : mode,
+              renderFormItem: renderFormItem
                 ? (...restProps) => {
-                    const newDom = props.renderFormItem?.(...restProps) as VNode | JSX.Element;
+                    const newDom = renderFormItem?.(...restProps) as VNode | JSX.Element;
                     if (isValidElement(newDom))
                       return cloneVNodes(newDom, {
-                        ...fieldProps,
+                        ...omitFieldProps,
                         ...((newDom.props as any) || {}),
                       });
                     return newDom;
                   }
                 : undefined,
-              fieldProps: pickProProps(fieldProps || {}),
-              formItemProps: pickProProps(formItemProps || {}),
+              fieldProps: pickProProps(omitFieldProps || {}),
+              formItemProps: pickProProps(omitFormItemProps || {}),
             }
           )}
         </>

diff --git a/packages/pro-form/examples/views/ProForm.vue b/packages/pro-form/examples/views/ProForm.vue
@@ -85,7 +85,7 @@
       required
     />
     <pro-form-text
-      name="name7"
+      name="name79"
       label="应用名称7"
       :field-props="{
         allowClear: true,
@@ -119,16 +119,16 @@
     <pro-form-select
       name="girlName"
       label="Girl姓名"
-      :options="girlNameoptions"
       :field-props="{
         placeholder: '请选择',
         mode: 'multiple',
+        options: girlNameoptions,
       }"
       required
     >
       <template #dropdownRender="{ menuNode: menu }">
         <v-nodes :vnodes="menu" />
-        <a-divider style="margin: 4px 0" />
+        <Divider style="margin: 4px 0" />
         <div style="padding: 4px 8px; cursor: pointer" @mousedown="(e) => e.preventDefault()" @click="addItem">
           <plus-outlined />
           Add item
@@ -141,7 +141,7 @@
 <script lang="ts" setup>
 import { reactive, ref, FunctionalComponent } from 'vue';
 import { PlusOutlined } from '@ant-design/icons-vue';
-import { RadioGroup, RadioButton, Switch, type SelectProps } from 'ant-design-vue';
+import { RadioGroup, RadioButton, Switch, Divider, 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';
 

diff --git a/packages/pro-form/src/components/Select/index.tsx b/packages/pro-form/src/components/Select/index.tsx
@@ -1,4 +1,4 @@
-import { defineComponent, type App, DefineComponent, Plugin, PropType, ExtractPropTypes } from 'vue';
+import { defineComponent, computed, unref, type App, DefineComponent, Plugin, PropType, ExtractPropTypes } from 'vue';
 import { searchSelectSlots } from '@ant-design-vue/pro-field';
 import { getSlot, type VueNode } from '@ant-design-vue/pro-utils';
 import { pick } from 'lodash-es';
@@ -9,7 +9,7 @@ import { proFormItemProps } from '../FormItem';
 const props = {
   ...proFormFieldProps,
   fieldProps: {
-    type: Object as PropType<Omit<SelectProps, 'value' | 'options'>>,
+    type: Object as PropType<Omit<SelectProps, 'value'>>,
   },
   options: {
     type: Array as PropType<SelectProps['options']>,
@@ -44,13 +44,17 @@ export const ProFormSelect = defineComponent({
     const maxTagPlaceholder = getSlot(slots, props, 'maxTagPlaceholder');
     const optionLabel = getSlot(slots, props, 'optionLabel');
 
+    const options = computed(() => {
+      return props.options || props.fieldProps?.options;
+    });
+
     return () => {
       return (
         <ProFormField
           valueType={'select'}
           fieldProps={{
             ...props.fieldProps,
-            options: props.options,
+            options: unref(options),
             notFoundContent,
             suffixIcon,
             itemIcon,