form-create-wot 0.1.0

package/src/fc/adapter/fc-select.vue

@@ -0,0 +1,62 @@
+<template>
+  <wd-select-picker
+    v-model="innerValue"
+    :columns="columns"
+    :label="label"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    :clearable="clearable"
+    @confirm="onConfirm"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue'
+import type { OptionItem } from '../types'
+
+const props = withDefaults(defineProps<{
+  modelValue?: any
+  options?: OptionItem[]
+  placeholder?: string
+  disabled?: boolean
+  label?: string
+  clearable?: boolean
+  mode?: string  // antdv: 'multiple' | 'tags'
+}>(), {
+  modelValue: undefined,
+  options: () => [],
+  placeholder: '请选择',
+  disabled: false,
+  label: '',
+  clearable: false,
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: any): void
+  (e: 'change', value: any): void
+}>()
+
+const innerValue = ref<any>(props.modelValue)
+
+watch(() => props.modelValue, (val) => {
+  innerValue.value = val
+})
+
+watch(innerValue, (val) => {
+  emit('update:modelValue', val)
+  emit('change', val)
+})
+
+/** 将 OptionItem[] 转换为 wd-select-picker columns 格式 */
+const columns = computed(() => {
+  return (props.options || []).map(opt => ({
+    value: opt.value,
+    label: opt.label,
+    disabled: opt.disabled,
+  }))
+})
+
+const onConfirm = ({ value }: any) => {
+  innerValue.value = value
+}
+</script>

package/src/fc/components/FcForm.vue

@@ -0,0 +1,408 @@
+<template>
+  <view class="fc-form">
+    <!-- 表单项列表 -->
+    <view class="fc-form__body">
+      <fc-form-item
+        v-for="rule in parsedRules"
+        :key="rule._id"
+        :ref="(el: any) => setItemRef(rule.field, el)"
+        :rule="rule"
+        :modelValue="getFieldValue(rule.field)"
+        :globalDisabled="formDisabled"
+        @update:modelValue="(val: any) => setFieldValue(rule.field, val)"
+        @validate="onFieldValidate"
+      />
+    </view>
+
+    <!-- 按钮区域 -->
+    <view class="fc-form__actions" v-if="showSubmitBtn || showResetBtn">
+      <wd-button
+        v-if="showResetBtn"
+        class="fc-form__btn fc-form__btn--reset"
+        plain
+        @click="handleReset"
+      >
+        {{ resetBtnText }}
+      </wd-button>
+      <wd-button
+        v-if="showSubmitBtn"
+        class="fc-form__btn fc-form__btn--submit"
+        type="primary"
+        :disabled="submitDisabled"
+        @click="handleSubmit"
+      >
+        {{ submitBtnText }}
+      </wd-button>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed, watch, onMounted, nextTick } from 'vue'
+import type { FormRule, FormOption, FormApi } from '../types'
+import { parseRules, flattenFieldRules, normalizeRule } from '../core/parser'
+import { validateValue } from '../core/validator'
+import FcFormItem from './FcFormItem.vue'
+
+const props = withDefaults(defineProps<{
+  /** JSON 规则数组 */
+  rule: FormRule[]
+  /** 表单配置 */
+  option?: FormOption
+  /** 外部绑定的 api 对象 */
+  api?: FormApi | null
+}>(), {
+  rule: () => [],
+  option: () => ({}),
+  api: null,
+})
+
+const emit = defineEmits<{
+  (e: 'submit', formData: Record<string, any>): void
+  (e: 'update:api', api: FormApi): void
+  (e: 'change', field: string, value: any): void
+  (e: 'mounted', api: FormApi): void
+}>()
+
+// ===== 规则解析 =====
+const parsedRules = ref<FormRule[]>([])
+const formData = reactive<Record<string, any>>({})
+const errors = reactive<Record<string, string>>({})
+const itemRefs = new Map<string | undefined, any>()
+
+watch(() => props.rule, (newRules) => {
+  initForm(newRules)
+}, { immediate: true, deep: true })
+
+function initForm(rules: FormRule[]) {
+  parsedRules.value = parseRules(rules)
+  // 初始化 formData
+  const fields = flattenFieldRules(parsedRules.value)
+  for (const field of fields) {
+    if (field.field && !(field.field in formData)) {
+      formData[field.field] = field.value ?? getDefaultValue(field.type)
+    }
+  }
+}
+
+function getDefaultValue(type: string): any {
+  switch (type) {
+    case 'checkbox':
+    case 'a-checkbox-group':
+    case 'checkboxGroup':
+      return []
+    case 'switch':
+    case 'a-switch':
+      return false
+    case 'rate':
+    case 'a-rate':
+      return 0
+    case 'slider':
+    case 'a-slider':
+      return 0
+    case 'InputNumber':
+    case 'inputNumber':
+    case 'a-input-number':
+      return 0
+    default:
+      return undefined
+  }
+}
+
+// ===== Refs 管理 =====
+function setItemRef(field: string | undefined, el: any) {
+  if (field) {
+    itemRefs.set(field, el)
+  }
+}
+
+// ===== 按钮配置 =====
+const showSubmitBtn = computed(() => props.option?.submitBtn?.show !== false)
+const showResetBtn = computed(() => props.option?.resetBtn?.show === true)
+const submitBtnText = computed(() => props.option?.submitBtn?.text || '提交')
+const resetBtnText = computed(() => props.option?.resetBtn?.text || '重置')
+const submitDisabled = computed(() => props.option?.submitBtn?.disabled || false)
+const formDisabled = computed(() => props.option?.form?.disabled || false)
+
+// ===== 值操作 =====
+function getFieldValue(field?: string): any {
+  if (!field) return undefined
+  return formData[field]
+}
+
+function setFieldValue(field: string | undefined, value: any) {
+  if (!field) return
+  formData[field] = value
+  emit('change', field, value)
+  // 联动处理
+  processControl(field, value)
+}
+
+// ===== 联动控制 =====
+function processControl(field: string, value: any) {
+  const rule = parsedRules.value.find(r => r.field === field)
+  if (!rule?.control || rule.control.length === 0) return
+
+  for (const ctrl of rule.control) {
+    let match = false
+
+    if (ctrl.condition) {
+      // 条件表达式（简化版：仅支持相等判断）
+      match = value === ctrl.value
+    } else if (ctrl.value !== undefined) {
+      match = Array.isArray(ctrl.value) ? ctrl.value.includes(value) : value === ctrl.value
+    } else if (ctrl.handle) {
+      // 暂不支持函数处理
+      match = !!value
+    }
+
+    if (match && ctrl.rule) {
+      // 显示联动的子规则
+      for (const subRule of ctrl.rule) {
+        const existing = parsedRules.value.find(r => r.field === subRule.field)
+        if (existing) {
+          existing.hidden = false
+          existing.display = true
+        }
+      }
+    } else if (ctrl.rule) {
+      // 隐藏联动的子规则
+      for (const subRule of ctrl.rule) {
+        const existing = parsedRules.value.find(r => r.field === subRule.field)
+        if (existing) {
+          existing.hidden = true
+        }
+      }
+    }
+  }
+}
+
+// ===== 校验 =====
+function onFieldValidate(field: string, error: string | null) {
+  if (error) {
+    errors[field] = error
+  } else {
+    delete errors[field]
+  }
+}
+
+async function validateAll(): Promise<Record<string, any>> {
+  const allErrors: Record<string, string> = {}
+  const fields = flattenFieldRules(parsedRules.value)
+
+  for (const rule of fields) {
+    if (!rule.field || rule.hidden || rule.display === false) continue
+    if (!rule.validate || rule.validate.length === 0) continue
+
+    const error = await validateValue(formData[rule.field], rule.validate, rule.title)
+    if (error) {
+      allErrors[rule.field] = error
+      // 同步到 ref 的错误状态
+      const itemRef = itemRefs.get(rule.field)
+      if (itemRef?.validate) {
+        await itemRef.validate()
+      }
+    }
+  }
+
+  if (Object.keys(allErrors).length > 0) {
+    Object.assign(errors, allErrors)
+    return Promise.reject(allErrors)
+  }
+  return { ...formData }
+}
+
+// ===== 提交 / 重置 =====
+async function handleSubmit() {
+  try {
+    const data = await validateAll()
+    emit('submit', data)
+    if (props.option?.onSubmit) {
+      props.option.onSubmit(data, fApi)
+    }
+  } catch (errs) {
+    console.warn('[form-create-wot] 表单校验失败:', errs)
+    uni.showToast({ title: '请检查表单填写', icon: 'none' })
+  }
+}
+
+function handleReset(fields?: string | string[]) {
+  const targetFields = fields
+    ? (typeof fields === 'string' ? [fields] : fields)
+    : Object.keys(formData)
+
+  for (const field of targetFields) {
+    const rule = parsedRules.value.find(r => r.field === field)
+    formData[field] = rule?.value ?? getDefaultValue(rule?.type || '')
+    const itemRef = itemRefs.get(field)
+    if (itemRef?.clearError) {
+      itemRef.clearError()
+    }
+  }
+  // 清除错误
+  for (const field of targetFields) {
+    delete errors[field]
+  }
+}
+
+// ===== fApi 构建 =====
+const fApi: FormApi = {
+  formData: () => ({ ...formData }),
+  getValue: (field: string) => formData[field],
+  setValue: (field: string, value: any) => {
+    formData[field] = value
+    const itemRef = itemRefs.get(field)
+    if (itemRef?.setValue) {
+      itemRef.setValue(value)
+    }
+  },
+  setValues: (values: Record<string, any>) => {
+    for (const [field, value] of Object.entries(values)) {
+      fApi.setValue(field, value)
+    }
+  },
+  validate: validateAll,
+  validateField: async (field: string) => {
+    const itemRef = itemRefs.get(field)
+    if (itemRef?.validate) {
+      return itemRef.validate()
+    }
+    return null
+  },
+  clearValidateState: (fields?: string | string[]) => {
+    const targetFields = fields
+      ? (typeof fields === 'string' ? [fields] : fields)
+      : Object.keys(errors)
+    for (const field of targetFields) {
+      delete errors[field]
+      const itemRef = itemRefs.get(field)
+      if (itemRef?.clearError) itemRef.clearError()
+    }
+  },
+  submit: async (onSubmit?) => {
+    const data = await validateAll()
+    if (onSubmit) onSubmit(data)
+    else emit('submit', data)
+  },
+  resetFields: handleReset,
+  hidden: (hidden: boolean, fields?: string | string[]) => {
+    const targets = fields
+      ? (typeof fields === 'string' ? [fields] : fields)
+      : parsedRules.value.filter(r => r.field).map(r => r.field!)
+    for (const field of targets) {
+      const rule = parsedRules.value.find(r => r.field === field)
+      if (rule) rule.hidden = hidden
+    }
+  },
+  display: (display: boolean, fields?: string | string[]) => {
+    const targets = fields
+      ? (typeof fields === 'string' ? [fields] : fields)
+      : parsedRules.value.filter(r => r.field).map(r => r.field!)
+    for (const field of targets) {
+      const rule = parsedRules.value.find(r => r.field === field)
+      if (rule) rule.display = display
+    }
+  },
+  disabled: (disabled: boolean, fields?: string | string[]) => {
+    const targets = fields
+      ? (typeof fields === 'string' ? [fields] : fields)
+      : parsedRules.value.filter(r => r.field).map(r => r.field!)
+    for (const field of targets) {
+      const rule = parsedRules.value.find(r => r.field === field)
+      if (rule) {
+        if (!rule.props) rule.props = {}
+        rule.props.disabled = disabled
+      }
+    }
+  },
+  getRule: () => parsedRules.value,
+  updateRule: (field: string, partial: Partial<FormRule>) => {
+    const rule = parsedRules.value.find(r => r.field === field)
+    if (rule) {
+      Object.assign(rule, partial)
+    }
+  },
+  updateRules: (updates: Record<string, Partial<FormRule>>) => {
+    for (const [field, partial] of Object.entries(updates)) {
+      fApi.updateRule(field, partial)
+    }
+  },
+  getEl: (field: string) => itemRefs.get(field),
+  append: (rule: FormRule, after?: string) => {
+    const normalized = normalizeRule(rule)
+    if (after) {
+      const idx = parsedRules.value.findIndex(r => r.field === after)
+      if (idx >= 0) {
+        parsedRules.value.splice(idx + 1, 0, normalized)
+        return
+      }
+    }
+    parsedRules.value.push(normalized)
+  },
+  prepend: (rule: FormRule, before?: string) => {
+    const normalized = normalizeRule(rule)
+    if (before) {
+      const idx = parsedRules.value.findIndex(r => r.field === before)
+      if (idx >= 0) {
+        parsedRules.value.splice(idx, 0, normalized)
+        return
+      }
+    }
+    parsedRules.value.unshift(normalized)
+  },
+  removeField: (field: string) => {
+    const idx = parsedRules.value.findIndex(r => r.field === field)
+    if (idx >= 0) {
+      parsedRules.value.splice(idx, 1)
+      delete formData[field]
+      delete errors[field]
+    }
+  },
+  refresh: () => {
+    initForm(props.rule)
+  },
+  on: () => {
+    // 事件监听简化版（可后续扩展）
+  },
+}
+
+// 挂载 API
+onMounted(() => {
+  emit('update:api', fApi)
+  emit('mounted', fApi)
+})
+</script>
+
+<style lang="scss">
+.fc-form {
+  width: 100%;
+  min-height: 100rpx;
+
+  &__body {
+    background: #fff;
+    border-radius: 16rpx;
+    overflow: hidden;
+  }
+
+  &__actions {
+    display: flex;
+    justify-content: center;
+    gap: 24rpx;
+    padding: 32rpx;
+    margin-top: 24rpx;
+  }
+
+  &__btn {
+    flex: 1;
+    max-width: 320rpx;
+
+    &--submit {
+      // 主色按钮
+    }
+
+    &--reset {
+      // 次要按钮
+    }
+  }
+}
+</style>