af-mobile-client-vue3 1.2.22 → 1.2.24

package/src/components/data/XForm/index.vue

@@ -3,9 +3,9 @@ import type { FormInstance } from 'vant'
 import XFormItem from '@af-mobile-client-vue3/components/data/XFormItem/index.vue'
 import XOlMap from '@af-mobile-client-vue3/components/data/XOlMap/index.vue'
 import { formatDate } from '@af-mobile-client-vue3/hooks/useCommon'
-import { addOrModifyEntity, runLogic } from '@af-mobile-client-vue3/services/api/common'
-import { post } from '@af-mobile-client-vue3/services/restTools'
+import { addOrModifyEntity, getConfigByName, runLogic } from '@af-mobile-client-vue3/services/api/common'
 import { useUserStore } from '@af-mobile-client-vue3/stores'
+
 import {
   showFailToast,
   showSuccessToast,
@@ -20,6 +20,10 @@ interface FormItem {
   isOnlyAddOrEdit?: boolean
   type?: string
   model?: string
+  name?: string
+  rule?: {
+    type: string
+  }
 }
 
 interface SilenceAddFormItem extends FormItem {
@@ -34,6 +38,13 @@ interface GroupFormItems {
   groupName?: string
   tableName?: string
 }
+
+interface InitParams {
+  formItems?: GroupFormItems
+  formData?: object
+  getDataParams?: object
+}
+
 const props = withDefaults(defineProps<{
   configName?: string
   groupFormItems?: GroupFormItems
@@ -43,6 +54,7 @@ const props = withDefaults(defineProps<{
   mode?: string
   submitButton?: boolean
   isHandleFormKey?: boolean
+  paramLogicNameParam?: any
 }>(), {
   configName: undefined,
   groupFormItems: null,
@@ -52,24 +64,28 @@ const props = withDefaults(defineProps<{
   mode: '查询',
   submitButton: true,
   isHandleFormKey: true,
+  paramLogicNameParam: undefined,
 })
+
 const emits = defineEmits(['onSubmit', 'xFormItemEmitFunc'])
 const userStore = useUserStore()
+
+// 核心状态
 const xFormRef = ref<FormInstance>()
-const myFormItems = ref<FormItem[]>([])
-const rules = reactive({})
+const loaded = ref(false)
 const form = ref({})
-const formGroupName = ref<string | null>(null)
+const rules = reactive({})
+const myGetDataParams = ref({})
+
+// 配置相关状态
+const formConfig = ref<GroupFormItems | null>(null)
+const formGroupName = ref<string>('default')
 const myServiceName = ref('')
-const loaded = ref(false)
-let myGetDataParams = reactive({})
 const tableName = ref('')
 
-const internalFormConfig = ref<GroupFormItems | null>(null)
-const internalSubmitButton = ref<boolean | undefined>(undefined)
-
+// 计算属性
 const realJsonData = computed(() => {
-  const sourceFormItems = internalFormConfig.value?.formJson || props.groupFormItems?.formJson
+  const sourceFormItems = formConfig.value?.formJson
   if (!sourceFormItems)
     return []
 
@@ -80,24 +96,25 @@ const realJsonData = computed(() => {
 
 // 过滤出用于静默新增场景的表单项
 const silenceAddJsonData = computed(() => {
-  return myFormItems.value.filter((item) => {
+  return realJsonData.value.filter((item) => {
     return item.addOrEdit === 'silenceAdd'
   }) as SilenceAddFormItem[]
 })
 
 const resolvedSubmitButton = computed(() => {
-  if (props.configName && internalSubmitButton.value !== undefined) {
-    return internalSubmitButton.value
+  if (props.configName && formConfig.value?.showSubmitBtn !== undefined) {
+    return formConfig.value.showSubmitBtn
   }
   return props.submitButton
 })
 
+// 地图预览相关
 const previewMapRef = ref(null)
-// 假设你只预览第一个 addressSearch 类型的经纬度
 const previewLonLatKey = computed(() => {
   const item = realJsonData.value.find(i => i.type === 'addressSearch')
   return item ? `${item.model}_lon_lat` : null
 })
+
 const previewMapPoint = computed(() => {
   const val = form.value[previewLonLatKey.value]
   if (val && typeof val === 'string' && val.includes(',')) {
@@ -123,128 +140,223 @@ watch(previewMapPoint, async (val) => {
   }
 }, { immediate: true })
 
-onBeforeMount(() => {
-  if (!props.configName && props.groupFormItems) {
-    if (props.groupFormItems && props.groupFormItems.tableName) {
-      tableName.value = props.groupFormItems.tableName.split(' ')[0] || ''
-    }
-    init({ formItems: props.groupFormItems, serviceName: props.serviceName, formData: props.formData, formName: props.formName })
-  }
-})
-
-watch(() => props.configName, (newConfigName) => {
-  if (newConfigName) {
-    loadFormConfig(newConfigName)
-  }
-  else if (props.groupFormItems) {
-    init({ formItems: props.groupFormItems, serviceName: props.serviceName, formData: props.formData, formName: props.formName })
-  }
-}, { immediate: true })
-
-async function loadFormConfig(name: string) {
+// 统一的初始化函数 - 仅在组件挂载时调用
+async function initializeForm() {
   loaded.value = false
+
   try {
-    const result = await post(`/api/${props.serviceName || import.meta.env.VITE_APP_SYSTEM_NAME}/logic/openapi/getLiuliConfiguration`, { configName: name })
-    if (result) {
-      internalFormConfig.value = result
-      internalSubmitButton.value = result.showSubmitBtn
-      myServiceName.value = props.serviceName || ''
-      formGroupName.value = result.groupName || 'default'
-      myFormItems.value = result.formJson as FormItem[]
-
-      form.value = props.formData || {}
-      Object.keys(rules).forEach(key => delete rules[key])
-      for (const item of realJsonData.value) {
-        setFormProps(form, item)
-      }
+    if (props.configName) {
+      await loadFormConfig()
+    }
+    else if (props.groupFormItems) {
+      await initWithGroupFormItems()
     }
     else {
-      console.warn(`Config '${name}' 不存在.`)
-      internalFormConfig.value = null
-      internalSubmitButton.value = undefined
-      myFormItems.value = []
-      form.value = {}
-      Object.keys(rules).forEach(key => delete rules[key])
+      console.warn('未提供配置名称或表单配置，等待 init 函数调用')
+      resetForm()
     }
   }
   catch (error) {
-    console.error(`无法加载配置 '${name}':`, error)
-    internalFormConfig.value = null
-    internalSubmitButton.value = undefined
-    myFormItems.value = []
-    form.value = {}
-    Object.keys(rules).forEach(key => delete rules[key])
+    console.error('表单初始化失败:', error)
+    resetForm()
   }
   finally {
     loaded.value = true
   }
 }
 
-function init(params) {
+// 加载配置的方式初始化
+async function loadFormConfig(): Promise<void> {
+  return new Promise((resolve, reject) => {
+    getConfigByName(props.configName!, (result) => {
+      if (result) {
+        // 如果有 paramLogicName，自动请求并赋值
+        if (result.paramLogicName && (!props.formData || (props.formData && Object.keys(props.formData).length === 0))) {
+          let logicParam = props.paramLogicNameParam
+          if (typeof logicParam === 'string') {
+            try {
+              logicParam = JSON.parse(logicParam)
+            }
+            catch {
+              logicParam = { value: logicParam }
+            }
+          }
+          logicParam = {
+            ...logicParam,
+            currUserName: userStore.getUserInfo().name,
+            currUserId: userStore.getUserInfo().id,
+            orgId: userStore.getUserInfo().orgid,
+          }
+          runLogic(result.paramLogicName, logicParam || {}, props.serviceName).then((data: any) => {
+            if (data) {
+              form.value = data
+            }
+          })
+        }
+        setupFormConfig(result)
+        resolve()
+      }
+      else {
+        console.warn(`配置 '${props.configName}' 不存在`)
+        reject(new Error(`配置 '${props.configName}' 不存在`))
+      }
+    }, props.serviceName)
+  })
+}
+
+// 直接使用 groupFormItems 初始化
+async function initWithGroupFormItems() {
+  if (!props.groupFormItems) {
+    throw new Error('groupFormItems 不能为空')
+  }
+
+  setupFormConfig(props.groupFormItems)
+
+  // 设置表名
+  if (props.groupFormItems.tableName) {
+    tableName.value = props.groupFormItems.tableName.split(' ')[0] || ''
+  }
+}
+
+// 设置表单配置
+function setupFormConfig(config: GroupFormItems) {
+  formConfig.value = config
+  myServiceName.value = props.serviceName || ''
+  formGroupName.value = config.groupName || 'default'
+  form.value = props.formData || {}
+
+  // 清理并重新设置验证规则
+  setupValidationRules()
+}
+
+// 设置验证规则
+function setupValidationRules() {
+  // 清理现有规则
+  Object.keys(rules).forEach(key => delete rules[key])
+
+  // 为每个表单项设置规则
+  for (const item of realJsonData.value) {
+    if (item.rule) {
+      setFormRule(item)
+    }
+  }
+}
+
+// 设置单个表单项的验证规则
+function setFormRule(item: FormItem) {
+  if (!item.model || !item.rule)
+    return
+
+  rules[item.model] = []
+  let defaultValue: any
+  let message: string
+
+  switch (item.rule.type) {
+    case 'number':
+      message = '数字'
+      defaultValue = 0
+      break
+    case 'integer':
+      message = '整数'
+      defaultValue = 0
+      break
+    case 'float':
+      message = '小数'
+      defaultValue = 0.0
+      break
+    case 'string':
+      message = '字符串'
+      defaultValue = ''
+      break
+    default:
+      return
+  }
+
+  rules[item.model].push({
+    type: item.rule.type,
+    message: `${item.name || item.model}必须为${message}`,
+    transform: (value: any) => {
+      if (value && value.length !== 0) {
+        return Number(value)
+      }
+      else {
+        return defaultValue
+      }
+    },
+    trigger: 'blur',
+  })
+}
+
+// 重置表单状态
+function resetForm() {
+  formConfig.value = null
+  formGroupName.value = 'default'
+  myServiceName.value = ''
+  tableName.value = ''
+  form.value = {}
+  Object.keys(rules).forEach(key => delete rules[key])
+  myGetDataParams.value = {}
+}
+
+// 监听 formData 变化
+watch(() => props.formData, (newVal) => {
+  if (newVal) {
+    form.value = newVal
+  }
+})
+
+// 组件挂载时初始化
+onBeforeMount(() => {
+  initializeForm()
+})
+
+// 支持函数调用方式初始化
+function init(params: InitParams) {
   const {
     formItems,
-    serviceName,
     formData = {},
-    formName = 'default',
+    getDataParams = {},
   } = params
-  loaded.value = false
-  myFormItems.value = JSON.parse(JSON.stringify(formItems.formJson)) as FormItem[]
-  myServiceName.value = serviceName
-  formGroupName.value = formName
-  for (let i = 0; i < realJsonData.value.length; i++) {
-    const item = realJsonData.value[i]
-    setFormProps(form, item)
-  }
-  if (formData)
-    form.value = formData
 
-  myGetDataParams = params.getDataParams || {}
-  loaded.value = true
-}
+  // 重置状态
+  loaded.value = false
 
-function setFormProps(form, item) {
-  if (item.rule) {
-    rules[item.model] = []
-    let defaultValue
-    let message
-    switch (item.rule.type) {
-      case 'number':
-        message = '数字'
-        defaultValue = 0
-        break
-      case 'integer':
-        message = '整数'
-        defaultValue = 0
-        break
-      case 'float':
-        message = '小数'
-        defaultValue = 0.0
-        break
-      case 'string':
-        message = '字符串'
-        defaultValue = ''
-        break
+  try {
+    if (props.configName) {
+      // 通过 props 中的配置名称初始化
+      loadFormConfig()
     }
-    rules[item.model].push({
-      type: item.rule.type,
-      message: `${item.name}必须为${message}`,
-      transform: (value) => {
-        if (value && value.length !== 0)
-          return Number(value)
-        else
-          return defaultValue
-      },
-      trigger: 'blur',
-    })
+    else if (formItems) {
+      // 直接使用传入的配置初始化
+      setupFormConfig(formItems)
+      form.value = formData || props.formData || {}
+      myGetDataParams.value = getDataParams
+
+      // 设置表名
+      if (formItems.tableName) {
+        tableName.value = formItems.tableName.split(' ')[0] || ''
+      }
+    }
+    else {
+      console.warn('init 函数调用时既没有 props.configName 也没有 formItems')
+      resetForm()
+    }
+  }
+  catch (error) {
+    console.error('init 函数初始化失败:', error)
+    resetForm()
+  }
+  finally {
+    loaded.value = true
   }
 }
 
-function setForm(obj) {
+function setForm(obj: object) {
   Object.assign(form.value, obj)
 }
 
 // 获取表单字段实际值
-function getRealKey(key, mustHandleKey = false) {
+function getRealKey(key: string, mustHandleKey = false) {
   if (key === 'selected_id')
     return key
   if (props.isHandleFormKey || mustHandleKey) {
@@ -275,8 +387,8 @@ async function asyncSubmit() {
   })
 }
 
-function handleFormKeys(form, mustHandleKey = false) {
-  const realForm = {}
+function handleFormKeys(form: any, mustHandleKey = false) {
+  const realForm: any = {}
   for (const key of Object.keys(form)) {
     const value = form[key]
     const extraFormKeyTagIndex = key.indexOf('@')
@@ -302,7 +414,7 @@ function handleFormKeys(form, mustHandleKey = false) {
   return realForm
 }
 
-async function appendSilenceAddFields(form) {
+async function appendSilenceAddFields(form: any) {
   if (props.mode === '新增') {
     for (const item of silenceAddJsonData.value) {
       switch (item.silencePurpose) {
@@ -330,7 +442,7 @@ async function appendSilenceAddFields(form) {
       }
     }
     for (const item of silenceAddJsonData.value.filter(item => item.silencePurpose === 'customize')) {
-      const result: any = await runLogic(item.silenceSource, form, props.serviceName)
+      const result: any = await runLogic(item.silenceSource!, form, props.serviceName)
       if (result) {
         const keys = Object.keys(result)
         if (keys.length === 1 && keys[0] === 'value') {
@@ -349,7 +461,7 @@ async function appendSilenceAddFields(form) {
 
 function prepareForm() {
   const formObj = { ...form.value }
-  const cleanedForm = {}
+  const cleanedForm: any = {}
 
   for (const key of Object.keys(formObj)) {
     const value = formObj[key]
@@ -381,7 +493,7 @@ function prepareForm() {
       }
 
       // 递归清理对象内部
-      const cleanedObject = {}
+      const cleanedObject: any = {}
       let hasValidValue = false
 
       for (const objKey of objectKeys) {
@@ -443,19 +555,16 @@ async function onSubmit() {
 async function validate() {
   await xFormRef.value?.validate()
 }
-function emitFunc(func, data, value) {
+function emitFunc(func: any, data: any, value: any) {
   emits(func, data, value)
   emits('xFormItemEmitFunc', func, data, value)
 }
 
-watch(() => props.formData, (_val) => {
-  form.value = _val
-})
 defineExpose({ init, form, formGroupName, validate, asyncSubmit, setForm, getFormData })
 </script>
 
 <template>
-  <VanForm ref="xFormRef" class="x-form-container" @submit="onSubmit">
+  <VanForm v-if="loaded" ref="xFormRef" class="x-form-container" @submit="onSubmit">
     <div class="form-fields-scrollable">
       <VanCellGroup inset>
         <XFormItem

package/src/components/data/XFormGroup/index.vue

@@ -123,11 +123,11 @@ defineExpose({ init })
 </template>
 
 <style scoped lang="less">
-#x-form-group{
-  background-color: rgb(247,248,250);
+#x-form-group {
+  background-color: rgb(247, 248, 250);
   padding-bottom: 10px;
-  .x-form-group-item{
-    margin:20px 0;
+  .x-form-group-item {
+    margin: 20px 0;
   }
 }
 </style>

package/src/components/data/XFormItem/index.vue

@@ -141,7 +141,7 @@ const currInst = getCurrentInstance()
 // 配置中心->表单项变更触发函数
 const dataChangeFunc = debounce(async () => {
   if (attr.dataChangeFunc) {
-    await executeStrFunctionByContext(currInst, attr.dataChangeFunc, [form, val => modelData.value = val, attr, null, mode])
+    await executeStrFunctionByContext(currInst, attr.dataChangeFunc, [form, (formData: any) => emits('setForm', formData), attr, null, mode])
   }
 }, 500)
 
@@ -160,44 +160,6 @@ const showFormItemFunc = debounce(async () => {
   }
 }, 500)
 
-// 监听 props.modelValue 的变化
-// watch(() => props.modelValue, (newVal) => {
-//   console.log('props.modelValue===', props.modelValue)
-// })
-
-/* function getDeafultValue(){
-  console.log('attr===', attr)
-  if (attr.type === 'radio' || attr.type === 'rate' || attr.type === 'slider' || attr.type === 'area' || attr.type === 'citySelect' || attr.type === 'calendar' || attr.type === 'textarea' || attr.type === 'intervalPicker' || attr.type === 'input' || attr.type === 'select') {
-    if (attr.formDefault)
-      localValue.value = attr.formDefault
-    if (attr.queryFormDefault)
-      localValue.value = attr.queryFormDefault
-  }
-
-  if (attr.type === 'checkbox' || attr.type === 'uploader' || attr.type === 'file' || attr.type === 'image' || attr.type === 'datePicker' || attr.type === 'timePicker') {
-    if (attr.formDefault) {
-      if (attr.type === 'checkbox' || attr.type === 'image' || attr.type === 'file')
-        formSelectDefaultValue.value = attr.formDefault
-      else
-        formSelectDefaultValue.value.push(attr.formDefault)
-    }
-    if (attr.queryFormDefault) {
-      // console.log(querySelectDefaultValue.value)
-      querySelectDefaultValue.value.push(...attr.queryFormDefault)
-      // querySelectDefaultValue.value = attr.queryFormDefault
-    }
-  }
-
-  if (attr.type === 'rangePicker') {
-    if (attr.formDefault)
-      formSelectDefaultValue.value = attr.formDefault
-    if (attr.queryFormDefault) {
-      const dateArray = getRangeByType(attr.queryFormDefault, true)
-      pickerValue.value = `${dateArray[0]} ~ ${dateArray[1]}`
-      querySelectDefaultValue.value = pickerValue.value
-    }
-  }
-} */
 /**
  * 检测是否传入了有效的值
  * @returns any
@@ -337,7 +299,6 @@ function getDateRange({
   }
 }
 
-// 删除 localValue 相关
 // 监听 props.form 的变化
 watch(
   () => props.form,
@@ -346,6 +307,21 @@ watch(
     if (props.attr.keyName && (props.attr.keyName.toString().includes('async ') || props.attr.keyName.toString().includes('function'))) {
       debouncedUpdateOptions()
     }
+    if (props.attr.showFormItemFunc) {
+      showFormItemFunc()
+    }
+  },
+  { deep: true },
+)
+
+// 监听 modelData 的变化，调用 dataChangeFunc
+watch(
+  () => modelData.value,
+  (newVal, oldVal) => {
+    // 避免初始化时的调用
+    if (oldVal !== undefined && newVal !== oldVal) {
+      dataChangeFunc()
+    }
   },
   { deep: true },
 )
@@ -596,12 +572,9 @@ async function updateResOptions(type) {
     const startIndex = attr.keyName.indexOf('[') + 1
     const endIndex = attr.keyName.indexOf(']', startIndex)
     const formModel = attr.keyName.substring(startIndex, endIndex).replace('.', '_')
-    // console.log(form)
     const formModelData = form[formModel]
     if (formModel?.length && formModelData?.length) {
       await searchToListOption(searchData, (res) => {
-        // console.log(res)
-        // console.log(form)
         getDataCallback(res.filter((h) => {
           return formModelData['0'] === h.f_organization_id || formModelData['0'] === h.f_department_id || formModelData['0'] === h.parentid
           // if (formModel.indexOf('org') > -1) {
@@ -751,7 +724,7 @@ function onTreeSelectFinish(value) {
 }
 
 function emitFunc(func, data) {
-  emits('xFormItemEmitFunc', func, data, data?.model ? this.form[data.model] : this.form)
+  emits('xFormItemEmitFunc', func, data, data?.model ? form[data.model] : form)
 }
 </script>