af-mobile-client-vue3 1.0.69 → 1.0.71

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

@@ -1,147 +1,153 @@
-<script setup lang="ts">
-import {
-  Button as VanButton,
-  CellGroup as VanCellGroup,
-  Form as VanForm,
-} from 'vant'
-import type { FormInstance } from 'vant';
-import {computed, reactive, ref, defineEmits, defineProps, onBeforeMount, watch} from 'vue'
-import XFormItem from '@af-mobile-client-vue3/components/data/XFormItem/index.vue'
-import { useRoute } from 'vue-router'
-
-interface FormItem {
-  addOrEdit: string
-  isOnlyAddOrEdit?: boolean
-  type?: string
-  model?: string
-}
-const props = withDefaults(defineProps<{
-  groupFormItems?: object,
-  serviceName?: string,
-  formData?: object,
-  formName?: string
-}>(), {
-  groupFormItems: null,
-  serviceName: undefined,
-  formData: null,
-  formName: 'default'
-})
-const route = useRoute()
-const emits = defineEmits(['onSubmit'])
-const formRef = ref<FormInstance>()
-const myFormItems = ref<FormItem[]>([])
-const rules = reactive({})
-const form = ref({})
-const formGroupName = ref(null)
-const myServiceName = ref('')
-const loaded = ref(false)
-let myGetDataParams = reactive({})
-const mode = route.query.mode as string
-const realJsonData = computed(() => {
-  let list =  myFormItems.value.filter(item => {
-    return item.addOrEdit !== 'no'
-  })
-  return list
-})
-onBeforeMount( () => {
-  init({ formItems: props.groupFormItems, serviceName:props.serviceName, formData: props.formData, formName:props.formName })
-})
-function init(params) {
-  const {
-    formItems,
-    serviceName,
-    getDataParams = {},
-    formData = null,
-    formName = 'default'
-  } = 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 = getDataParams
-  loaded.value = true
-}
-
-function setFormProps(form, item) {
-  form.value[item.model] = undefined
-  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
-    }
-    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',
-    })
-  }
-}
-
-function onSubmit() {
-  emits('onSubmit', form.value)
-}
-async function validate() {
-  await formRef.value?.validate()
-}
-watch(()=>props.formData, (val)=>{
-  form.value = props.formData
-})
-defineExpose({ init, form, formGroupName, validate })
-</script>
-
-<template>
-  <VanForm @submit="onSubmit" ref="formRef">
-    <VanCellGroup inset>
-      <XFormItem
-        :mode="mode"
-        v-for="(item, index) in realJsonData"
-        :key="index"
-        v-model="form[item.model]"
-        :attr="item"
-        :rules="rules"
-        :service-name="myServiceName"
-        :get-data-params="myGetDataParams"
-      />
-    </VanCellGroup>
-    <div style="margin: 16px;" v-if="myFormItems.showSubmitBtn">
-      <VanButton round block type="primary" native-type="submit">
-        提交 {{myFormItems.showSubmitBtn}}
-      </VanButton>
-      <slot />
-    </div>
-  </VanForm>
-</template>
-
-<style scoped>
-
-</style>
+<script setup lang="ts">
+import {
+  Button as VanButton,
+  CellGroup as VanCellGroup,
+  Form as VanForm,
+} from 'vant'
+import type { FormInstance } from 'vant'
+import { computed, defineEmits, defineProps, onBeforeMount, reactive, ref, watch } from 'vue'
+import XFormItem from '@af-mobile-client-vue3/components/data/XFormItem/index.vue'
+
+interface FormItem {
+  addOrEdit: string
+  isOnlyAddOrEdit?: boolean
+  type?: string
+  model?: string
+}
+
+interface GroupFormItems {
+  btnName?: string
+  formJson: any[] // 根据实际类型调整
+}
+const props = withDefaults(defineProps<{
+  groupFormItems?: GroupFormItems
+  serviceName?: string
+  formData?: object
+  formName?: string
+  mode?: string
+  submitButton?: boolean
+}>(), {
+  groupFormItems: null,
+  serviceName: undefined,
+  formData: null,
+  formName: 'default',
+  mode: '查询',
+  submitButton: true,
+})
+const emits = defineEmits(['onSubmit'])
+const formRef = ref<FormInstance>()
+const myFormItems = ref<FormItem[]>([])
+const rules = reactive({})
+const form = ref({})
+const formGroupName = ref(null)
+const myServiceName = ref('')
+const loaded = ref(false)
+let myGetDataParams = reactive({})
+const realJsonData = computed(() => {
+  return myFormItems.value.filter((item) => {
+    return item.addOrEdit !== 'no'
+  })
+})
+onBeforeMount(() => {
+  init({ formItems: props.groupFormItems, serviceName: props.serviceName, formData: props.formData, formName: props.formName })
+})
+function init(params) {
+  const {
+    formItems,
+    serviceName,
+    getDataParams = {},
+    formData = null,
+    formName = 'default',
+  } = 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 = getDataParams
+  loaded.value = true
+}
+
+function setFormProps(form, item) {
+  form.value[item.model] = undefined
+  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
+    }
+    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',
+    })
+  }
+}
+
+function onSubmit() {
+  emits('onSubmit', form.value)
+}
+async function validate() {
+  await formRef.value?.validate()
+}
+watch(() => props.formData, (_val) => {
+  form.value = props.formData
+})
+defineExpose({ init, form, formGroupName, validate })
+</script>
+
+<template>
+  <VanForm ref="formRef" @submit="onSubmit">
+    <VanCellGroup inset>
+      <XFormItem
+        v-for="(item, index) in realJsonData"
+        :key="index"
+        v-model="form[item.model]"
+        :mode="props.mode"
+        :form="form"
+        :attr="item"
+        :rules="rules"
+        :service-name="myServiceName"
+        :get-data-params="myGetDataParams"
+      />
+    </VanCellGroup>
+    <div v-if="props.submitButton" style="margin: 16px;">
+      <VanButton round block type="primary" native-type="submit">
+        {{ props.groupFormItems.btnName ? props.groupFormItems.btnName : '提交' }}
+      </VanButton>
+      <slot />
+    </div>
+  </VanForm>
+</template>
+
+<style scoped>
+
+</style>

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

@@ -1,75 +1,96 @@
-<script setup lang="ts">
-import {
-  Tabs as VanTabs,
-  Tab as VanTab,
-  Row as VanRow,
-  Button as VanButton
-} from 'vant'
-import { defineProps, watchEffect, onBeforeMount, ref, onMounted, watch, defineEmits } from 'vue'
-import XForm from '@af-mobile-client-vue3/components/data/XForm/index.vue'
-import NormalDataLayout from '@af-mobile-client-vue3/components/layout/NormalDataLayout/index.vue'
-import { useRouter } from 'vue-router'
-import {getConfigByName, query} from '@af-mobile-client-vue3/services/api/common'
-
-const props = withDefaults(defineProps<{
-  configName?: string
-  serviceName?: string,
-  groupFormData?: object
-}>(), {
-  configName: '',
-  serviceName: undefined,
-  groupFormData: {}
-})
-const emit = defineEmits(['submit'])
-const router = useRouter()
-const groupItems = ref([])
-const formData = ref({})
-function initComponents () {
-  getConfigByName(props.configName, (result) => {
-    groupItems.value = result.groups
-    formData.value = props.groupFormData
-    result.groups.forEach((group) => {
-      if(!formData.value[group.groupName]){
-        formData.value[group.groupName] = {}
-      }
-    })
-  }, props.serviceName)
-}
-watch(()=>props.groupFormData, (val)=>{
-  formData.value = {...formData.value, ...props.groupFormData}
-})
-onBeforeMount(()=>{
-  initComponents()
-})
-const xFormListRef = ref([])
-const submit = async () => {
-  for (const res of xFormListRef.value) {
-    await res.validate()
-    formData.value[res.formGroupName] = res.form
-  }
-  emit('submit', formData)
-}
-</script>
-
-<template>
-  <div id="x-form-group">
-    <VanTabs v-model:active="active" scrollspy sticky>
-      <VanTab v-for="(item, index) in groupItems" :title="item.describe" :key="item.groupName+index" >
-        <div class="x-form-group-item">
-          <XForm :group-form-items="item" :form-data="formData[item.groupName]" ref="xFormListRef" :form-name="item.groupName" :service-name="props.serviceName"/>
-        </div>
-      </VanTab>
-    </VanTabs>
-    <VanButton round block type="primary" @click="submit">
-      提交
-    </VanButton>
-  </div>
-</template>
-<style scoped lang="less">
-#x-form-group{
-  background-color: rgb(247,248,250);
-  .x-form-group-item{
-    margin:20px 0;
-  }
-}
-</style>
+<script setup lang="ts">
+import {
+  Button as VanButton,
+  Tab as VanTab,
+  Tabs as VanTabs,
+} from 'vant'
+import { defineEmits, defineProps, onBeforeMount, ref, watch } from 'vue'
+import XForm from '@af-mobile-client-vue3/components/data/XForm/index.vue'
+import { getConfigByName } from '@af-mobile-client-vue3/services/api/common'
+
+const props = withDefaults(defineProps<{
+  configName?: string
+  serviceName?: string
+  groupFormData?: object
+  mode?: string
+}>(), {
+  configName: '',
+  serviceName: undefined,
+  groupFormData: () => ({}),
+  mode: '查询',
+})
+const emit = defineEmits(['submit'])
+const groupItems = ref([])
+const formData = ref({})
+const submitGroup = ref(false)
+const submitSimple = ref(false)
+function initComponents() {
+  getConfigByName(props.configName, (result) => {
+    formData.value = props.groupFormData
+    if (result.groups) {
+      submitGroup.value = true
+      groupItems.value = result.groups
+      result.groups.forEach((group) => {
+        if (!formData.value[group.groupName])
+          formData.value[group.groupName] = {}
+      })
+    }
+    else {
+      submitSimple.value = result.showSubmitBtn
+      groupItems.value = [{ ...result }]
+    }
+  }, props.serviceName)
+}
+watch(() => props.groupFormData, (_val) => {
+  formData.value = { ...formData.value, ...props.groupFormData }
+})
+onBeforeMount(() => {
+  initComponents()
+})
+const xFormListRef = ref([])
+async function submit() {
+  for (const res of xFormListRef.value) {
+    await res.validate()
+    formData.value[res.formGroupName] = res.form
+  }
+  emit('submit', formData)
+}
+</script>
+
+<template>
+  <div id="x-form-group">
+    <VanTabs scrollspy sticky>
+      <VanTab
+        v-for="(item, index) in groupItems"
+        :key="item.groupName ? (item.groupName + index) : index"
+        :title="item.describe ? item.describe : null "
+      >
+        <div class="x-form-group-item">
+          <XForm
+            ref="xFormListRef"
+            :mode="props.mode"
+            :group-form-items="item"
+            :form-data="item.groupName ? formData[item.groupName] : formData"
+            :form-name="item.groupName"
+            :service-name="props.serviceName"
+            :submit-button="submitSimple"
+            @on-submit="submit"
+          />
+        </div>
+      </VanTab>
+    </VanTabs>
+    <VanButton v-if="submitGroup" round block type="primary" @click="submit">
+      提交
+    </VanButton>
+  </div>
+</template>
+
+<style scoped lang="less">
+#x-form-group{
+  background-color: rgb(247,248,250);
+  padding-bottom: 10px;
+  .x-form-group-item{
+    margin:20px 0;
+  }
+}
+</style>