wip(VForm): VForm coding

src/components/Form/src/VForm.vue

@@ -1,8 +1,10 @@
 <script lang="tsx">
-import { PropType, defineComponent, onMounted, ref, unref } from 'vue'
-import { ElForm } from 'element-plus'
-// import { COMPONENT_MAP } from './componentMap'
+import { PropType, defineComponent, ref, computed, unref, watch } from 'vue'
+import { ElForm, ElFormItem, ElRow, ElCol } from 'element-plus'
+import { COMPONENT_MAP } from './componentMap'
 import { propTypes } from '@/utils/propTypes'
+import { getSlot } from '@/utils/tsxHelper'
+import { setTextPlaceholder } from './helper'
 
 export default defineComponent({
   name: 'VForm',
@@ -25,17 +27,77 @@ export default defineComponent({
     // 是否自定义内容
     isCustom: propTypes.bool.def(false)
   },
-  setup() {
+  setup(props, { slots }) {
     const formRef = ref<ComponentRef<typeof ElForm>>()
-    onMounted(() => {
-      console.log(unref(formRef)?.clearValidate)
-    })
+    const getProps = computed(() => props)
+    const { schema, isCol, isCustom, autoSetPlaceholder } = unref(getProps)
+    const test = ref('')
 
-    // function renderWrap() {}
+    watch(
+      () => test.value,
+      (val) => {
+        console.log(val)
+      }
+    )
 
-    // function renderFormItem() {}
+    // 渲染包裹标签，是否使用栅格布局
+    function renderWrap() {
+      const content = isCol ? (
+        <ElRow gutter={20}>
+          <ElCol>{renderFormItem()}</ElCol>
+        </ElRow>
+      ) : (
+        renderFormItem()
+      )
+      console.log(content)
+      return content
+    }
 
-    return () => <ElForm ref={formRef}></ElForm>
+    // 渲染formItem
+    function renderFormItem() {
+      // hidden属性表示隐藏
+      return schema
+        .filter((v) => !v.hidden)
+        .map((item) => {
+          return (
+            <ElFormItem {...(item.formItemProps || {})} prop={item.field} label={item.label}>
+              {() => {
+                const Com = COMPONENT_MAP[item.component as string] as ReturnType<
+                  typeof defineComponent
+                >
+                return (
+                  <Com
+                    v-model={test.value}
+                    {...(autoSetPlaceholder && setTextPlaceholder(item))}
+                  ></Com>
+                )
+              }}
+            </ElFormItem>
+          )
+        })
+      // return <div>{schema[0]?.field}</div>
+    }
+
+    // 过滤传入Form组件的属性
+    function getFormBindValue() {
+      // 避免在标签上出现多余的属性
+      const delKeys = ['schema', 'isCol', 'autoSetPlaceholder', 'isCustom']
+      const props = { ...unref(getProps) }
+      for (const key in props) {
+        if (delKeys.indexOf(key) !== -1) {
+          delete props[key]
+        }
+      }
+      return props
+    }
+
+    return () => (
+      <ElForm ref={formRef} {...getFormBindValue()}>
+        {{
+          default: () => (isCustom ? getSlot(slots, 'default') : renderWrap())
+        }}
+      </ElForm>
+    )
   }
 })
 </script>

src/components/Form/src/helper.ts

@@ -1,8 +1,39 @@
+// import { useI18n } from '@/hooks/web/useI18n'
+// const { t } = useI18n()
 /**
  *
  * @param schema 对应组件数据
  * @description 用于自动设置placeholder
  */
-export function setTextPlaceholder(schema: VFormSchema) {
+export function setTextPlaceholder(schema: VFormSchema): {
+  placeholder?: string
+  startPlaceholder?: string
+  endPlaceholder?: string
+} {
   console.log(schema)
+  // const textMap = ['Input', 'Autocomplete', 'InputNumber']
+  // const selectMap = ['Select', 'TimePicker', 'DatePicker', 'TimeSelect', 'TimeSelect']
+  // if (textMap.includes(schema?.component as string)) {
+  //   return {
+  //     placeholder: t('common.inputText')
+  //   }
+  // }
+  // if (selectMap.includes(schema?.component as string)) {
+  //   // 一些范围选择器
+  //   const twoTextMap = ['datetimerange', 'daterange', 'monthrange', 'datetimerange', 'daterange']
+  //   if (
+  //     twoTextMap.includes(schema?.componentProps?.type || schema?.componentProps?.isRange) as string
+  //   ) {
+  //     return {
+  //       startPlaceholder: t('common.startTimeText'),
+  //       endPlaceholder: t('common.endTimeText'),
+  //       rangeSeparator: '-'
+  //     }
+  //   } else {
+  //     return {
+  //       placeholder: t('common.selectText')
+  //     }
+  //   }
+  // }
+  return {}
 }