af-mobile-client-vue3 1.0.69 → 1.0.71

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

@@ -1,579 +1,638 @@
-<script setup lang="ts">
-import {
-  Area as VanArea,
-  Calendar as VanCalendar,
-  Checkbox as VanCheckbox,
-  DatePicker as VanDatePicker,
-  Field as VanField,
-  Picker as VanPicker,
-  Popup as VanPopup,
-  Radio as VanRadio,
-  RadioGroup as VanRadioGroup,
-  Rate as VanRate,
-  Slider as VanSlider,
-  Stepper as VanStepper,
-  Switch as VanSwitch,
-  TimePicker as VanTimePicker,
-  CheckboxGroup as vanCheckboxGroup,
-} from 'vant'
-import { computed, defineEmits, defineProps, onBeforeMount, reactive, ref } from 'vue'
-import { areaList } from '@vant/area-data'
-import { runLogic } from '@af-mobile-client-vue3/services/api/common'
-import Uploader from '@af-mobile-client-vue3/components/core/Uploader/index.vue'
-import XSelect from '@af-mobile-client-vue3/components/core/XSelect/index.vue'
-import XMultiSelect from '@af-mobile-client-vue3/components/core/XMultiSelect/index.vue'
-import XGridDropOption from '@af-mobile-client-vue3/components/core/XGridDropOption/index.vue'
-import type { Numeric } from 'vant/es/utils'
-import { getDict } from "@af-mobile-client-vue3/utils/dictUtil";
-import {useRoute} from "vue-router";
-
-const props = defineProps({
-  attr: {
-    type: Object,
-  },
-  datePickerFilter: {
-    type: Function,
-    default: () => true,
-  },
-  datePickerFormatter: {
-    type: Function,
-    default: (type, val) => val,
-  },
-  mode: {
-    type: String,
-    default: '查询',
-  },
-  serviceName: {
-    type: String,
-    default: undefined,
-  },
-  // 调用logic获取数据源的追加参数
-  getDataParams: {
-    type: Object,
-    default: undefined,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  rules: {
-    type: Object,
-    default: () => {},
-  },
-  modelValue: {
-    type: [String, Number, Boolean, Array, Object],
-    default: undefined,
-  },
-  showLabel: {
-    type: Boolean,
-    default: true,
-  },
-  // radio/checkbox/select/mul-select 选项数据结构
-  columnsField: {
-    type: Object,
-    default: () => {
-      return { text: 'label', value: 'value' }
-    },
-  },
-
-})
-
-const emits = defineEmits(['update:modelValue'])
-const { attr, mode, serviceName, getDataParams, columnsField } = props
-const calendarShow = ref(false)
-const option = ref([])
-const pickerValue = ref(undefined)
-const datePickerValue = ref(undefined)
-const timePickerValue = ref(undefined)
-const area = ref<any>(undefined)
-const calendarValue = ref<any>('')
-const showPicker = ref(false)
-const showDatePicker = ref(false)
-const showTimePicker = ref(false)
-const showArea = ref(false)
-
-const localValue = computed({
-  get() {
-    // if (props.modelValue !== undefined) {
-    //   return props.modelValue
-    // }
-    switch (props.attr.type) {
-      case 'switch':
-        return props.modelValue != undefined ? props.modelValue:false
-      case 'checkbox':
-      case 'uploader':
-      case 'file':
-      case 'image':
-      case 'datePicker':
-      case 'timePicker':
-      case 'select':
-        return props.modelValue != undefined ? props.modelValue:[]
-      case 'radio':
-      case 'rate':
-      case 'slider':
-      case 'area':
-      case 'citySelect':
-      case 'calendar':
-      case 'textarea':
-      case 'input':
-        return props.modelValue != undefined ? props.modelValue:''
-      case 'stepper':
-        return props.modelValue != undefined ? props.modelValue:1
-      case 'rangePicker':
-        if(props.modelValue && Array.isArray(props.modelValue) && props.modelValue.length>1){
-          return`${props.modelValue[0]} ~ ${props.modelValue[1]}`
-        }else{
-          return props.modelValue
-        }
-      default:
-        return undefined
-    }
-  },
-  set(newValue) {
-    emits('update:modelValue', newValue)
-  },
-})
-
-onBeforeMount(() => {
-  init()
-})
-const labelData = computed(()=>{
-  return props.showLabel?attr.name:null
-})
-const formatDate = date => `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
-
-function onCalendarConfirm(values) {
-  localValue.value = [formatDate(values[0]),formatDate(values[1])]
-  calendarShow.value = false
-}
-
-function init() {
-  if (attr.keyName && typeof attr.keyName === 'string') {
-    if (attr.keyName && attr.keyName.includes('logic@')) {
-      getData({}, (res) => {
-        option.value = res
-        initRadioValue()
-      })
-    } else if (attr.keyName && attr.keyName.includes('config@')) {
-      const configName = attr.keyName.substring(7)
-      getDict(configName,  (result) => {
-        if (result) {
-          option.value = result
-        }
-      },serviceName)
-    } else {
-      initRadioValue()
-    }
-  }
-}
-
-function initRadioValue() {
-  if (mode === '新增/修改' && attr.type === 'radio' && !localValue.value) {
-    if (attr.keys && attr.keys.length > 0)
-      localValue.value = attr.keys[0].value
-    else if (option && option.value.length > 0)
-      localValue.value = option[0].value
-  }
-}
-
-function getData(value, callback) {
-  if (value !== '') {
-    const logicName = attr.keyName
-    const logic = logicName.substring(6)
-    // 调用logic前设置参数
-    if (getDataParams && getDataParams[attr.model])
-      Object.assign(value, getDataParams[attr.model])
-
-    runLogic(logic, value, serviceName).then((res) => {
-      callback(res)
-    })
-  }
-}
-
-function onPickerConfirm({ selectedOptions }) {
-  showPicker.value = false
-  pickerValue.value = selectedOptions[0].text
-  emits('update:modelValue', [selectedOptions[0].text])
-}
-
-function onDatePickerConfirm({ selectedValues }) {
-  showDatePicker.value = false
-  localValue.value = selectedValues.join('-')
-}
-
-function onTimePickerConfirm({ selectedValues }) {
-  showTimePicker.value = false
-  timePickerValue.value = selectedValues.join(':')
-  emits('update:modelValue', timePickerValue.value)
-}
-
-function onAreaConfirm({ selectedOptions }) {
-  area.value = `${selectedOptions[0].text}-${selectedOptions[1].text}-${selectedOptions[2].text}`
-  showArea.value = false
-  emits('update:modelValue', [{
-    province: selectedOptions[0].text,
-    city: selectedOptions[1].text,
-    district: selectedOptions[2].text,
-  }])
-}
-
-function updateFile(files, _index) {
-  files.forEach((file) => {
-    if (file.content)
-      delete file.content
-    if (file.file)
-      delete file.file
-    if (file.objectUrl)
-      delete file.objectUrl
-  })
-  localValue.value = files
-  emits('update:modelValue', localValue.value)
-}
-</script>
-
-<template>
-  <div>
-    <!-- switch开关 -->
-    <VanField
-      v-if="attr.type === 'switch'"
-      name="switch"
-      :label="labelData"
-      :rules="[{ required: attr.rule.required === 'true', message: `未切换${attr.name}` }]"
-    >
-      <template #input>
-        <VanSwitch v-model="localValue" />
-      </template>
-    </VanField>
-
-    <!-- 复选框 -->
-<!--    <VanField
-      v-if="attr.type === 'checkbox'"
-      name="checkbox"
-      :label="labelData"
-    >
-      <template #input>
-        <VanCheckbox v-model="localValue" shape="square" />
-      </template>
-    </VanField>-->
-
-    <!-- 多选框-checkbox-复选框组  -->
-    <template v-if="attr.type === 'checkbox'">
-      <!--  勾选    -->
-      <VanField
-        v-if="attr.showMode === 'checkbox' && mode != '查询'"
-        name="checkboxGroup"
-        :label="labelData"
-        :rules="[{ required: attr.rule.required === 'true', message: '至少选择一项' }]"
-      >
-        <template #input>
-          <van-checkbox-group v-model="localValue as any[]" direction="horizontal" shape="square">
-            <VanCheckbox v-for="(item, index) in option" :key="index" style="padding: 2px" :name="item[columnsField.value]" :shape="rules?.[attr.model].shape" :value="item[columnsField.value]">
-              {{ item[columnsField.text] }}
-            </VanCheckbox>
-          </van-checkbox-group>
-        </template>
-      </VanField>
-      <VanField
-        v-if="attr.showMode === 'checkbox' && mode === '查询'"
-        name="checkboxGroup"
-        :label="labelData"
-        :rules="[{ required: attr.rule.required === 'true', message: '至少选择一项' }]"
-      >
-        <template #input>
-          <XGridDropOption
-            v-model="localValue"
-            :multiple="true"
-            :columns="option"
-          />
-        </template>
-      </VanField>
-      <!--   下拉   -->
-      <XMultiSelect
-        v-else
-        :label="labelData"
-        v-model="localValue"
-        :placeholder="attr.placeholder ? attr.placeholder : `请选择${attr.name}`"
-        :columns="option"
-        :option="attr.option ? attr.option : columnsField"
-        :rules="[{ required: attr.rule.required === 'true', message: '至少选择一项' }]"
-      />
-    </template>
-
-    <!-- 单选框 -->
-    <VanField
-      v-if="attr.type === 'radio' && mode != '查询'"
-      name="radio"
-      :placeholder="attr.placeholder ? attr.placeholder : `请选择${attr.name}`"
-      :label="labelData"
-      :rules="[{ required: attr.rule.required === 'true', message: '必须选择一项' }]"
-    >
-      <template #input>
-        <VanRadioGroup v-model="localValue" direction="horizontal">
-          <VanRadio v-for="(item, index) in option" :key="index" style="padding: 2px" :name="item[columnsField.value]" :value="item[columnsField.value]">
-            {{ item[columnsField.text] }}
-          </VanRadio>
-        </VanRadioGroup>
-      </template>
-    </VanField>
-
-<!-- 单选框-查询 -->
-    <VanField
-      v-if="attr.type === 'radio' && mode === '查询'"
-      name="radio"
-      :placeholder="attr.placeholder ? attr.placeholder : `请选择${attr.name}`"
-      :label="labelData"
-      :rules="[{ required: attr.rule.required === 'true', message: '必须选择一项' }]"
-    >
-      <template #input>
-        <XGridDropOption
-          v-model="localValue"
-          :columns="option"
-        />
-      </template>
-    </VanField>
-
-    <!-- 步进器 -->
-    <VanField
-      v-if="attr.type === 'stepper'"
-      name="stepper"
-      :label="labelData"
-      :rules="[{ required: attr.rule.required === 'true', message: `未调整${attr.name}` }]"
-    >
-      <template #input>
-        <VanStepper v-model="localValue as string" />
-      </template>
-    </VanField>
-
-    <!-- 评分 -->
-    <VanField
-      v-if="attr.type === 'rate'"
-      name="rate"
-      :label="labelData"
-      :rules="[{ required: attr.rule.required === 'true', message: `未进行${attr.name}评分` }]"
-    >
-      <template #input>
-        <VanRate v-model="localValue as number" />
-      </template>
-    </VanField>
-
-    <!-- 滑块 -->
-    <VanField
-      v-if="attr.type === 'slider'"
-      name="slider"
-      :label="labelData"
-      :rules="[{ required: attr.rule.required === 'true', message: `未移动${attr.name}滑块` }]"
-    >
-      <template #input>
-        <VanSlider v-model="localValue as number" />
-      </template>
-    </VanField>
-
-    <!-- 图片文件上传 -->
-    <VanField
-      v-if="attr.type === 'image' || attr.type === 'file'"
-      name="uploader"
-      :label="labelData"
-      :rules="[{ required: attr.rule.required === 'true', message: `未上传${attr.name}` }]"
-    >
-      <template #input>
-        <!--      <van-uploader v-model="localValue" /> -->
-        <Uploader
-          upload-mode="server"
-          :image-list="localValue as any[]"
-          authority="admin"
-          @update-file-list="updateFile"
-        />
-      </template>
-    </VanField>
-
-    <!-- 选择器 -->
-    <VanField
-      v-if="attr.type === 'picker'"
-      v-model="pickerValue"
-      name="picker"
-      :placeholder="attr.placeholder ? attr.placeholder : `请选择${attr.name}`"
-      :label="labelData" readonly
-      is-link
-      @click="showPicker = true"
-      :rules="[{ required: attr.rule.required === 'true', message: `未选择${attr.name}` }]"
-    />
-    <VanPopup v-model:show="showPicker" round position="bottom" teleport="body">
-      <VanPicker
-        v-model="localValue as Numeric[]"
-        :title="attr.name"
-        :columns="attr.selectKey"
-        :readonly="attr.readonly"
-        :columns-field-names="attr.customFieldName ? attr.customFieldName : { text: 'text', value: 'value', children: 'children' }"
-        :confirm-button-text="attr.confirmButtonText || attr.confirmButtonText === '' ? attr.confirmButtonText : '确认'"
-        :cancel-button-text="attr.cancelButtonText || attr.cancelButtonText === '' ? attr.cancelButtonText : '取消'"
-        @cancel="showPicker = false"
-        @confirm="onPickerConfirm"
-      />
-    </VanPopup>
-
-    <!-- 日历选择-查询 -->
-    <VanField
-      v-if="attr.type === 'rangePicker' && mode === '查询'"
-      v-model="localValue as string | number"
-      is-link
-      readonly
-      name="rangePicker"
-      :label="labelData"
-      :placeholder="attr.placeholder ? attr.placeholder : `请选择${attr.name}`"
-      @click="calendarShow = true"
-      :rules="[{ required: attr.rule.required === 'true', message: '未选择日期' }]"
-    />
-    <VanCalendar
-      switch-mode="year-month"
-      type="range"
-      v-model:show="calendarShow"
-      teleport="body"
-      :show-confirm="attr.showConfirm"
-      @confirm="onCalendarConfirm"
-    />
-
-    <!-- 日期选择-非查询 -->
-    <VanField
-      v-if="(attr.type === 'datePicker' || attr.type === 'rangePicker') && mode != '查询'"
-      v-model="localValue as string | number"
-      name="datePicker"
-      :label="labelData"
-      readonly
-      :is-link="true"
-      :placeholder="attr.placeholder ? attr.placeholder : `请选择${attr.name}`"
-      @click="showDatePicker = true"
-      :rules="[{ required: attr.rule.required === 'true', message: '未选择日期' }]"
-    />
-    <VanPopup v-model:show="showDatePicker" position="bottom" teleport="body">
-      <VanDatePicker
-        v-model="datePickerValue"
-        calend
-        :title="attr.name"
-        :confirm-button-text="attr.confirmButtonText ? attr.confirmButtonText : '确认'"
-        :cancel-button-text="attr.cancelButtonText ? attr.cancelButtonText : '取消'"
-        :columns-type="attr.columnsType ? attr.columnsType : ['year', 'month', 'day']"
-        :readonly="attr.readonly ? attr.readonly : false"
-        @cancel="showDatePicker = false"
-        @confirm="onDatePickerConfirm"
-      />
-    </VanPopup>
-
-    <!-- 日期选择-查询 -->
-    <VanField
-      v-if="attr.type === 'datePicker' && mode == '查询'"
-      v-model="localValue as string | number"
-      name="datePicker"
-      :label="labelData"
-      readonly
-      :is-link="true"
-      :placeholder="attr.placeholder ? attr.placeholder : `请选择${attr.name}`"
-      @click="showDatePicker = true"
-      :rules="[{ required: attr.rule.required === 'true', message: '未选择日期' }]"
-    />
-    <VanPopup v-model:show="showDatePicker" position="bottom" teleport="body">
-      <VanDatePicker
-        v-model="datePickerValue"
-        calend
-        :title="attr.name"
-        :confirm-button-text="attr.confirmButtonText ? attr.confirmButtonText : '确认'"
-        :cancel-button-text="attr.cancelButtonText ? attr.cancelButtonText : '取消'"
-        :columns-type="attr.columnsType ? attr.columnsType : ['year', 'month', 'day']"
-        :readonly="attr.readonly ? attr.readonly : false"
-        @cancel="showDatePicker = false"
-        @confirm="onDatePickerConfirm"
-      />
-    </VanPopup>
-
-    <!-- 时间选择 -->
-    <VanField
-      v-if="attr.type === 'timePicker'"
-      v-model="timePickerValue"
-      name="timePicker"
-      is-link
-      readonly
-      :placeholder="attr.placeholder"
-      :label="labelData"
-      @click="showTimePicker = true"
-      :rules="[{ required: attr.rule.required === 'true', message: '未选择时间' }]"
-    />
-    <VanPopup v-model:show="showTimePicker" position="bottom" teleport="body">
-      <VanTimePicker
-        v-model="localValue as string[]"
-        :title="attr.name"
-        :columns-type="attr.columnsType ? attr.columnsType : ['hour', 'minute', 'second']"
-        :min-time="attr.minTime ? attr.minTime : '00:00:00'"
-        :max-time="attr.maxTime ? attr.maxTime : '23:59:59'"
-        :readonly="attr.readonly ? attr.readonly : false"
-        @cancel="showTimePicker = false"
-        @confirm="onTimePickerConfirm"
-      />
-    </VanPopup>
-
-    <!-- 省市区选择 -->
-    <VanField
-      v-if="attr.type === 'area' || attr.type === 'citySelect'"
-      v-model="area"
-      name="area"
-      :placeholder="attr.placeholder ? attr.placeholder : `请选择${attr.name}`"
-      is-link
-      readonly
-      :label="labelData"
-      @click="showArea = true"
-      :rules="[{ required: attr.rule.required === 'true', message: '未选择地区' }]"
-    />
-    <VanPopup v-model:show="showArea" position="bottom" teleport="body">
-      <VanArea
-        v-model="localValue as string" :title="attr.name" :area-list="areaList"
-        @confirm="onAreaConfirm"
-        @cancel="showArea = false"
-      />
-    </VanPopup>
-
-    <!-- 单选下拉列表 -->
-    <XSelect
-      v-if="attr.type === 'select'"
-      v-model="localValue"
-      :label="labelData"
-      clearable
-      :placeholder="attr.placeholder ? attr.placeholder : `请选择${attr.name}`"
-      :columns="option"
-      :option="attr.option ? attr.option : columnsField"
-      :rules="[{ required: attr.rule.required === 'true', message: '必须选择一项' }]"
-    />
-
-
-    <!-- 文本区域 -->
-    <VanField
-      v-if="attr.type === 'textarea'"
-      v-model="localValue as string"
-      rows="3"
-      autosize
-      :label="labelData"
-      type="textarea"
-      :maxlength="attr.maxlength"
-      :placeholder="attr.placeholder ? attr.placeholder : `请输入${attr.name}`"
-      show-word-limit
-      label-align="top"
-      :rules="[{ required: attr.rule.required === 'true', message: `必须填写${attr.name}` }]"
-    />
-
-    <!-- 文本输入框 -->
-    <VanField
-      v-if="attr.type === 'input'"
-      v-model="localValue as string"
-      :label="labelData"
-      :required="attr.required"
-      :type="attr.type"
-      :readonly="attr.readonly"
-      :disabled="attr.disabled"
-      :placeholder="attr.placeholder ? attr.placeholder : `请输入${attr.name}`"
-      :error-message="attr.errorMessage"
-      :clearable="attr.clearable"
-      :rules="[{ required: attr.rule.required === 'true', message: `必须填写${attr.name}` }]"
-    />
-  </div>
-</template>
-
-<style scoped>
-
-</style>
+<script setup lang="ts">
+import {
+  Area as VanArea,
+  Calendar as VanCalendar,
+  Checkbox as VanCheckbox,
+  DatePicker as VanDatePicker,
+  Field as VanField,
+  Picker as VanPicker,
+  Popup as VanPopup,
+  Radio as VanRadio,
+  RadioGroup as VanRadioGroup,
+  Rate as VanRate,
+  Slider as VanSlider,
+  Stepper as VanStepper,
+  Switch as VanSwitch,
+  TimePicker as VanTimePicker,
+  CheckboxGroup as vanCheckboxGroup,
+} from 'vant'
+import { computed, defineEmits, defineProps, getCurrentInstance, onBeforeMount, ref, watch } from 'vue'
+import { areaList } from '@vant/area-data'
+import { runLogic } from '@af-mobile-client-vue3/services/api/common'
+import Uploader from '@af-mobile-client-vue3/components/core/Uploader/index.vue'
+import XSelect from '@af-mobile-client-vue3/components/core/XSelect/index.vue'
+import XMultiSelect from '@af-mobile-client-vue3/components/core/XMultiSelect/index.vue'
+import XGridDropOption from '@af-mobile-client-vue3/components/core/XGridDropOption/index.vue'
+import type { Numeric } from 'vant/es/utils'
+import { getDict } from '@af-mobile-client-vue3/utils/dictUtil'
+import { executeStrFunctionByContext } from '@af-mobile-client-vue3/utils/runEvalFunction'
+import { debounce } from 'lodash-es'
+
+const props = defineProps({
+  attr: {
+    type: Object,
+  },
+  form: {
+    type: Object,
+  },
+  datePickerFilter: {
+    type: Function,
+    default: () => true,
+  },
+  datePickerFormatter: {
+    type: Function,
+    default: (type, val) => val,
+  },
+  mode: {
+    type: String,
+    default: '查询',
+  },
+  serviceName: {
+    type: String,
+    default: undefined,
+  },
+  // 调用logic获取数据源的追加参数
+  getDataParams: {
+    type: Object,
+    default: undefined,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  rules: {
+    type: Object,
+    default: () => {},
+  },
+  modelValue: {
+    type: [String, Number, Boolean, Array, Object],
+    default: undefined,
+  },
+  showLabel: {
+    type: Boolean,
+    default: true,
+  },
+  // radio/checkbox/select/mul-select 选项数据结构
+  columnsField: {
+    type: Object,
+    default: () => {
+      return { text: 'label', value: 'value' }
+    },
+  },
+
+})
+
+const emits = defineEmits(['update:modelValue'])
+const { attr, form, mode, serviceName, getDataParams, columnsField } = props
+const calendarShow = ref(false)
+const option = ref([])
+const pickerValue = ref(undefined)
+const datePickerValue = ref(undefined)
+const timePickerValue = ref(undefined)
+const area = ref<any>(undefined)
+const showPicker = ref(false)
+const showDatePicker = ref(false)
+const showTimePicker = ref(false)
+const showArea = ref(false)
+// 是否展示当前项
+const showItem = ref(true)
+
+// 当前组件实例（不推荐使用，可能会在后续的版本更迭中调整，暂时用来绑定函数的上下文）
+const currInst = getCurrentInstance()
+
+// 配置中心->表单项变更触发函数
+const dataChangeFunc = debounce(async () => {
+  if (attr.dataChangeFunc)
+    await executeStrFunctionByContext(currInst, attr.dataChangeFunc, [form, attr, null, mode])
+}, 500)
+
+// 配置中心->表单项展示函数
+const showFormItemFunc = debounce(async () => {
+  if (attr.showFormItemFunc) {
+    const obj = await executeStrFunctionByContext(currInst, attr.showFormItemFunc, [form, attr, null, mode])
+    // 判断是 bool 还是  obj  兼容
+    if (typeof obj === 'boolean') {
+      showItem.value = obj
+    }
+    else if (obj && typeof obj === 'object') {
+      // obj 是一个对象，并且不是数组
+      showItem.value = obj?.show
+    }
+  }
+}, 500)
+
+const localValue = computed({
+  get() {
+    // if (props.modelValue !== undefined) {
+    //   return props.modelValue
+    // }
+    switch (props.attr.type) {
+      case 'switch':
+        return props.modelValue !== undefined ? props.modelValue : false
+      case 'checkbox':
+      case 'uploader':
+      case 'file':
+      case 'image':
+      case 'datePicker':
+      case 'timePicker':
+      case 'select':
+        return props.modelValue !== undefined ? props.modelValue : []
+      case 'radio':
+      case 'rate':
+      case 'slider':
+      case 'area':
+      case 'citySelect':
+      case 'calendar':
+      case 'textarea':
+      case 'input':
+        return props.modelValue !== undefined ? props.modelValue : ''
+      case 'stepper':
+        return props.modelValue !== undefined ? props.modelValue : 1
+      case 'rangePicker':
+        if (props.modelValue && Array.isArray(props.modelValue) && props.modelValue.length > 1)
+          return `${props.modelValue[0]} ~ ${props.modelValue[1]}`
+
+        else
+          return props.modelValue
+
+      default:
+        return undefined
+    }
+  },
+  set(newValue) {
+    emits('update:modelValue', newValue)
+    dataChangeFunc()
+  },
+})
+
+onBeforeMount(() => {
+  init()
+  showFormItemFunc()
+  dataChangeFunc()
+})
+// 是否展示表单左侧label文字
+const labelData = computed(() => {
+  return props.showLabel ? attr.name : null
+})
+// 是否只读
+const readonly = computed(() => {
+  return attr.addOrEdit === 'readonly'
+})
+// 提示内容
+const placeholder = computed(() => {
+  if (attr.addOrEdit === 'readonly')
+    return ' 暂无内容 ~ '
+  else
+    return attr.placeholder ? attr.placeholder : `请选择${attr.name}`
+})
+// 登录信息 (可以在配置的动态函数中使用 this.setupState 获取到当前组件内的全部函数和变量 例：this.setupState.userState)
+
+const formatDate = date => `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
+
+function onCalendarConfirm(values) {
+  localValue.value = [formatDate(values[0]), formatDate(values[1])]
+  calendarShow.value = false
+}
+
+function init() {
+  if (attr.keyName && typeof attr.keyName === 'string') {
+    if (attr.keyName && attr.keyName.includes('logic@')) {
+      getData({}, (res) => {
+        option.value = res
+        initRadioValue()
+      })
+    }
+    else if (attr.keyName && attr.keyName.includes('config@')) {
+      const configName = attr.keyName.substring(7)
+      getDict(configName, (result) => {
+        if (result)
+          option.value = result
+      }, serviceName)
+    }
+    else {
+      initRadioValue()
+    }
+  }
+}
+
+function initRadioValue() {
+  if ((mode === '新增' || mode === '修改') && attr.type === 'radio' && !localValue.value) {
+    if (attr.keys && attr.keys.length > 0)
+      localValue.value = attr.keys[0].value
+    else if (option.value && option.value.length > 0)
+      localValue.value = option.value[0].value
+  }
+}
+
+function getData(value, callback) {
+  if (value !== '') {
+    const logicName = attr.keyName
+    const logic = logicName.substring(6)
+    // 调用logic前设置参数
+    if (getDataParams && getDataParams[attr.model])
+      Object.assign(value, getDataParams[attr.model])
+
+    runLogic(logic, value, serviceName).then((res) => {
+      callback(res)
+    })
+  }
+}
+
+function onPickerConfirm({ selectedOptions }) {
+  showPicker.value = false
+  pickerValue.value = selectedOptions[0].text
+  emits('update:modelValue', [selectedOptions[0].text])
+}
+
+function onDatePickerConfirm({ selectedValues }) {
+  showDatePicker.value = false
+  localValue.value = selectedValues.join('-')
+}
+
+function onTimePickerConfirm({ selectedValues }) {
+  showTimePicker.value = false
+  timePickerValue.value = selectedValues.join(':')
+  emits('update:modelValue', timePickerValue.value)
+}
+
+function onAreaConfirm({ selectedOptions }) {
+  area.value = `${selectedOptions[0].text}-${selectedOptions[1].text}-${selectedOptions[2].text}`
+  showArea.value = false
+  emits('update:modelValue', [{
+    province: selectedOptions[0].text,
+    city: selectedOptions[1].text,
+    district: selectedOptions[2].text,
+  }])
+}
+
+function updateFile(files, _index) {
+  files.forEach((file) => {
+    if (file.content)
+      delete file.content
+    if (file.file)
+      delete file.file
+    if (file.objectUrl)
+      delete file.objectUrl
+  })
+  localValue.value = files
+  emits('update:modelValue', localValue.value)
+}
+// 监听表单发生变化后触发展示函数
+watch(form, (_oldVal, _newVal) => {
+  showFormItemFunc()
+})
+</script>
+
+<template>
+  <div>
+    <!-- switch开关 -->
+    <VanField
+      v-if="attr.type === 'switch' && showItem"
+      name="switch"
+      :label="labelData"
+      :rules="[{ required: attr.rule.required === 'true', message: `未切换${attr.name}` }]"
+    >
+      <template #input>
+        <VanSwitch v-model="localValue" />
+      </template>
+    </VanField>
+
+    <!-- 复选框 -->
+    <!--    <VanField
+      v-if="attr.type === 'checkbox'"
+      name="checkbox"
+      :label="labelData"
+    >
+      <template #input>
+        <VanCheckbox v-model="localValue" shape="square" />
+      </template>
+    </VanField> -->
+
+    <!-- 多选框-checkbox-复选框组  -->
+    <template v-if="attr.type === 'checkbox' && showItem">
+      <!--  勾选    -->
+      <VanField
+        v-if="attr.showMode === 'checkbox' && mode !== '查询'"
+        name="checkboxGroup"
+        :label="labelData"
+        :rules="[{ required: attr.rule.required === 'true', message: '至少选择一项' }]"
+      >
+        <template #input>
+          <van-checkbox-group v-model="localValue as any[]" direction="horizontal" shape="square" :disabled="readonly">
+            <VanCheckbox v-for="(item, index) in option" :key="index" style="padding: 2px" :name="item[columnsField.value]" :shape="rules?.[attr.model].shape" :value="item[columnsField.value]">
+              {{ item[columnsField.text] }}
+            </VanCheckbox>
+          </van-checkbox-group>
+        </template>
+      </VanField>
+      <VanField
+        v-if="attr.showMode === 'checkbox' && mode === '查询'"
+        name="checkboxGroup"
+        :label="labelData"
+        :rules="[{ required: attr.rule.required === 'true', message: '至少选择一项' }]"
+      >
+        <template #input>
+          <XGridDropOption
+            v-model="(localValue as string[])"
+            :column-num="labelData ? 3 : 4"
+            :multiple="true"
+            :columns="option"
+          />
+        </template>
+      </VanField>
+      <!--   下拉   -->
+      <XMultiSelect
+        v-else
+        v-model="localValue"
+        :label="labelData"
+        :readonly="readonly"
+        :placeholder="placeholder"
+        :columns="option"
+        :option="attr.option ? attr.option : columnsField"
+        :rules="[{ required: attr.rule.required === 'true', message: '至少选择一项' }]"
+      />
+    </template>
+
+    <!-- 单选框 -->
+    <VanField
+      v-if="attr.type === 'radio' && mode !== '查询' && showItem"
+      name="radio"
+      :placeholder="attr.placeholder ? attr.placeholder : `请选择${attr.name}`"
+      :label="labelData"
+      :rules="[{ required: attr.rule.required === 'true', message: '必须选择一项' }]"
+    >
+      <template #input>
+        <VanRadioGroup v-model="localValue" direction="horizontal" :disabled="readonly">
+          <VanRadio v-for="(item, index) in option" :key="index" style="padding: 2px" :name="item[columnsField.value]" :value="item[columnsField.value]">
+            {{ item[columnsField.text] }}
+          </VanRadio>
+        </VanRadioGroup>
+      </template>
+    </VanField>
+
+    <!-- 单选框-查询 -->
+    <VanField
+      v-if="attr.type === 'radio' && mode === '查询' && showItem"
+      name="radio"
+      :placeholder="attr.placeholder ? attr.placeholder : `请选择${attr.name}`"
+      :label="labelData"
+      :rules="[{ required: attr.rule.required === 'true', message: '必须选择一项' }]"
+    >
+      <template #input>
+        <XGridDropOption
+          v-model="(localValue as string)"
+          :column-num="labelData ? 3 : 4"
+          :columns="option"
+        />
+      </template>
+    </VanField>
+
+    <!-- 步进器 -->
+    <VanField
+      v-if="attr.type === 'stepper' && showItem"
+      name="stepper"
+      :label="labelData"
+      :readonly="readonly"
+      :rules="[{ required: attr.rule.required === 'true', message: `未调整${attr.name}` }]"
+    >
+      <template #input>
+        <VanStepper v-model="(localValue as string)" />
+      </template>
+    </VanField>
+
+    <!-- 评分 -->
+    <VanField
+      v-if="attr.type === 'rate' && showItem"
+      name="rate"
+      :label="labelData"
+      :readonly="readonly"
+      :rules="[{ required: attr.rule.required === 'true', message: `未进行${attr.name}评分` }]"
+    >
+      <template #input>
+        <VanRate v-model="(localValue as number)" />
+      </template>
+    </VanField>
+
+    <!-- 滑块 -->
+    <VanField
+      v-if="attr.type === 'slider' && showItem"
+      name="slider"
+      :label="labelData"
+      :readonly="readonly"
+      :rules="[{ required: attr.rule.required === 'true', message: `未移动${attr.name}滑块` }]"
+    >
+      <template #input>
+        <VanSlider v-model="(localValue as number)" />
+      </template>
+    </VanField>
+
+    <!-- 图片文件上传 -->
+    <VanField
+      v-if="(attr.type === 'image' || attr.type === 'file') && showItem"
+      name="uploader"
+      :label="labelData"
+      :rules="[{ required: attr.rule.required === 'true', message: `未上传${attr.name}` }]"
+    >
+      <template #input>
+        <!--      <van-uploader v-model="localValue" /> -->
+        <Uploader
+          upload-mode="server"
+          :image-list="(localValue as any[])"
+          authority="admin"
+          @update-file-list="updateFile"
+        />
+      </template>
+    </VanField>
+
+    <!-- 选择器 -->
+    <VanField
+      v-if="attr.type === 'picker' && showItem"
+      v-model="pickerValue"
+      name="picker"
+      :placeholder="attr.placeholder ? attr.placeholder : `请选择${attr.name}`"
+      :label="labelData"
+      :readonly="readonly"
+      is-link
+      :rules="[{ required: attr.rule.required === 'true', message: `未选择${attr.name}` }]"
+      @click="showPicker = true"
+    />
+    <VanPopup v-model:show="showPicker" round position="bottom" teleport="body">
+      <VanPicker
+        v-model="(localValue as Numeric[])"
+        :title="attr.name"
+        :columns="attr.selectKey"
+        :readonly="readonly"
+        :columns-field-names="attr.customFieldName ? attr.customFieldName : { text: 'text', value: 'value', children: 'children' }"
+        :confirm-button-text="attr.confirmButtonText || attr.confirmButtonText === '' ? attr.confirmButtonText : '确认'"
+        :cancel-button-text="attr.cancelButtonText || attr.cancelButtonText === '' ? attr.cancelButtonText : '取消'"
+        @cancel="showPicker = false"
+        @confirm="onPickerConfirm"
+      />
+    </VanPopup>
+
+    <!-- 日历选择-查询 -->
+    <VanField
+      v-if="attr.type === 'rangePicker' && mode === '查询' && showItem"
+      v-model="(localValue as string | number)"
+      is-link
+      readonly
+      name="rangePicker"
+      :label="labelData"
+      :placeholder="attr.placeholder ? attr.placeholder : `请选择${attr.name}`"
+      :rules="[{ required: attr.rule.required === 'true', message: '未选择日期' }]"
+      @click="calendarShow = true"
+    />
+    <VanCalendar
+      v-model:show="calendarShow"
+      switch-mode="year-month"
+      type="range"
+      teleport="body"
+      :show-confirm="attr.showConfirm"
+      @confirm="onCalendarConfirm"
+    />
+
+    <!-- 日期选择-非查询 -->
+    <VanField
+      v-if="(attr.type === 'datePicker' || attr.type === 'rangePicker') && mode !== '查询' && showItem"
+      v-model="(localValue as string | number)"
+      name="datePicker"
+      :label="labelData"
+      readonly
+      :is-link="true"
+      :placeholder="placeholder"
+      :rules="[{ required: attr.rule.required === 'true', message: '未选择日期' }]"
+      @click="readonly ? null : showDatePicker = true"
+    />
+    <VanPopup v-model:show="showDatePicker" position="bottom" teleport="body">
+      <VanDatePicker
+        v-model="datePickerValue"
+        calend
+        :title="attr.name"
+        :confirm-button-text="attr.confirmButtonText ? attr.confirmButtonText : '确认'"
+        :cancel-button-text="attr.cancelButtonText ? attr.cancelButtonText : '取消'"
+        :columns-type="attr.columnsType ? attr.columnsType : ['year', 'month', 'day']"
+        @cancel="showDatePicker = false"
+        @confirm="onDatePickerConfirm"
+      />
+    </VanPopup>
+
+    <!-- 日期选择-查询 -->
+    <VanField
+      v-if="attr.type === 'datePicker' && mode === '查询' && showItem"
+      v-model="(localValue as string | number)"
+      name="datePicker"
+      :label="labelData"
+      readonly
+      :is-link="true"
+      :placeholder="attr.placeholder ? attr.placeholder : `请选择${attr.name}`"
+      :rules="[{ required: attr.rule.required === 'true', message: '未选择日期' }]"
+      @click="showDatePicker = true"
+    />
+    <VanPopup v-model:show="showDatePicker" position="bottom" teleport="body">
+      <VanDatePicker
+        v-model="datePickerValue"
+        calend
+        :title="attr.name"
+        :confirm-button-text="attr.confirmButtonText ? attr.confirmButtonText : '确认'"
+        :cancel-button-text="attr.cancelButtonText ? attr.cancelButtonText : '取消'"
+        :columns-type="attr.columnsType ? attr.columnsType : ['year', 'month', 'day']"
+        :readonly="attr.readonly ? attr.readonly : false"
+        @cancel="showDatePicker = false"
+        @confirm="onDatePickerConfirm"
+      />
+    </VanPopup>
+
+    <!-- 时间选择 -->
+    <VanField
+      v-if="attr.type === 'timePicker' && showItem"
+      v-model="timePickerValue"
+      name="timePicker"
+      is-link
+      readonly
+      :placeholder="attr.placeholder"
+      :label="labelData"
+      :rules="[{ required: attr.rule.required === 'true', message: '未选择时间' }]"
+      @click="showTimePicker = true"
+    />
+    <VanPopup v-model:show="showTimePicker" position="bottom" teleport="body">
+      <VanTimePicker
+        v-model="localValue as string[]"
+        :title="attr.name"
+        :columns-type="attr.columnsType ? attr.columnsType : ['hour', 'minute', 'second']"
+        :min-time="attr.minTime ? attr.minTime : '00:00:00'"
+        :max-time="attr.maxTime ? attr.maxTime : '23:59:59'"
+        :readonly="attr.readonly ? attr.readonly : false"
+        @cancel="showTimePicker = false"
+        @confirm="onTimePickerConfirm"
+      />
+    </VanPopup>
+
+    <!-- 省市区选择 -->
+    <VanField
+      v-if="(attr.type === 'area' || attr.type === 'citySelect') && showItem"
+      v-model="area"
+      name="area"
+      :placeholder="attr.placeholder ? attr.placeholder : `请选择${attr.name}`"
+      is-link
+      readonly
+      :label="labelData"
+      :rules="[{ required: attr.rule.required === 'true', message: '未选择地区' }]"
+      @click="readonly ? null : showArea = true"
+    />
+    <VanPopup v-model:show="showArea" position="bottom" teleport="body">
+      <VanArea
+        v-model="localValue as string" :title="attr.name" :area-list="areaList"
+        @confirm="onAreaConfirm"
+        @cancel="showArea = false"
+      />
+    </VanPopup>
+
+    <!-- 单选下拉列表 -->
+    <XSelect
+      v-if="attr.type === 'select' && showItem"
+      v-model="localValue"
+      :label="labelData"
+      :readonly="readonly"
+      clearable
+      :placeholder="placeholder"
+      :columns="option"
+      :option="attr.option ? attr.option : columnsField"
+      :rules="[{ required: attr.rule.required === 'true', message: '必须选择一项' }]"
+    />
+
+    <!-- 文本区域 -->
+    <VanField
+      v-if="attr.type === 'textarea' && showItem"
+      v-model="(localValue as string)"
+      rows="3"
+      autosize
+      :label="labelData"
+      type="textarea"
+      :readonly="readonly"
+      :maxlength="attr.maxlength"
+      :placeholder="attr.placeholder ? attr.placeholder : `请输入${attr.name}`"
+      show-word-limit
+      label-align="top"
+      :rules="[{ required: attr.rule.required === 'true', message: `必须填写${attr.name}` }]"
+    />
+
+    <!-- 文本输入框 -->
+    <VanField
+      v-if="attr.type === 'input' && showItem"
+      v-model="(localValue as string)"
+      :label="labelData"
+      :required="attr.required"
+      :type="attr.type"
+      :readonly="readonly"
+      :disabled="attr.disabled"
+      :placeholder="placeholder"
+      :error-message="attr.errorMessage"
+      :clearable="attr.clearable"
+      :rules="[{ required: attr.rule.required === 'true', message: `必须填写${attr.name}` }]"
+    />
+  </div>
+</template>
+
+<style scoped>
+
+</style>