vue2-client 1.9.39 → 1.9.41

package/src/base-client/components/common/XForm/XFormItem.vue

@@ -1,1156 +1,1149 @@
-<template>
-  <!-- 输入框 -->
-  <x-form-col
-    v-if="attr.type === 'input' && show"
-    :flex="attr.flex">
-    <a-form-model-item
-      :ref="attr.model"
-      :label="showLabel?attr.name:undefined"
-      :labelCol="layout === 'inline' && attr.occupyCol ? labelAndWrapperCol[attr.occupyCol].labelCol:undefined"
-      :wrapperCol="layout === 'inline'&& attr.occupyCol ? labelAndWrapperCol[attr.occupyCol].wrapperCol:undefined"
-      :style="layout === 'inline'&& attr.occupyCol && attr.occupyCol > 1? {width:`calc(100% - ${attr.occupyCol * 1.533}rem)`}:{}"
-      :prop="attr.prop ? attr.prop : attr.model">
-      <!--  如果配置了后置按钮插槽    -->
-      <a-input-group
-        v-if="(attr.inputOnAfterName && attr.inputOnAfterFunc) || (attr.inputOnAfterIcon && attr.inputOnAfterIconFunc)"
-        style="display: flex; width: 100%;"
-        compact>
-        <a-input
-          v-model="form[attr.model]"
-          :read-only="readOnly"
-          :disabled="disabled && !readOnly"
-          :whitespace="true"
-          style="flex: 1; width: auto; min-width: 0;"
-          @change="attr.dataChangeFunc && debouncedDataChangeFunc()"
-          :suffix="attr.inputSuffix && mode !== '新增' ? attr.inputSuffix : ''"
-          @blur="attr.inputOnBlurFunc && emitFunc(attr.inputOnBlurFunc,attr)"
-          @keyup.enter="attr.inputOnEnterFunc && emitFunc(attr.inputOnEnterFunc, attr)"
-          :placeholder="attr.placeholder ? attr.placeholder : '请输入'+attr.name.replace(/\s*/g, '')"
-          :ref="`${attr.model}input`"/>
-        <a-button
-          v-if="attr.inputOnAfterName && attr.inputOnAfterFunc"
-          style="flex: 1; width: auto; min-width: 4rem;max-width: 6rem"
-          type="primary"
-          @click="emitFunc(attr.inputOnAfterFunc,form[attr.model])">
-          {{ attr.inputOnAfterName }}
-        </a-button>
-        <!--    仅可以配置 一个按钮 以及 一个图标插槽    -->
-        <a-button
-          style="width: 2rem; flex-shrink: 0;"
-          v-if="attr.inputOnAfterIcon"
-          :type="attr.inputOnAfterIcon && attr.inputOnAfterName ? 'primary' :''"
-          :icon="attr.inputOnAfterIcon || 'question'"
-          @click="emitFunc(attr.inputOnAfterIconFunc,form[attr.model])">
-        </a-button>
-      </a-input-group>
-      <a-input-number
-        v-else-if="attr.numberInput && !readOnly"
-        v-model="form[attr.model]"
-        :whitespace="true"
-        :disabled="disabled && !readOnly"
-        style="width:100%"
-        @blur="attr.inputOnBlurFunc && emitFunc(attr.inputOnBlurFunc,attr)"
-        @keyup.enter="attr.inputOnEnterFunc && emitFunc(attr.inputOnEnterFunc, attr)"
-        :suffix="attr.inputSuffix && mode !== '新增' ? attr.inputSuffix : ''"
-        :placeholder="attr.placeholder ? attr.placeholder : '请输入'+attr.name.replace(/\s*/g, '')"
-        :ref="`${attr.model}input`"/>
-      <a-input
-        v-else
-        v-model="form[attr.model]"
-        :whitespace="true"
-        :read-only="readOnly"
-        :disabled="disabled && !readOnly"
-        :suffix="attr.inputSuffix && mode !== '新增' ? attr.inputSuffix : ''"
-        style="width:100%"
-        @blur="attr.inputOnBlurFunc && emitFunc(attr.inputOnBlurFunc,attr)"
-        @keyup.enter="attr.inputOnEnterFunc && emitFunc(attr.inputOnEnterFunc, attr)"
-        :placeholder="attr.placeholder ? attr.placeholder : '请输入'+attr.name.replace(/\s*/g, '')"
-        :ref="`${attr.model}input`"/>
-
-    </a-form-model-item>
-  </x-form-col>
-  <!-- 下拉框 -->
-  <x-form-col
-    v-else-if="(attr.type === 'select' || (attr.type === 'rate' && mode==='查询')) && show"
-    :flex="attr.flex">
-    <a-form-model-item
-      :ref="attr.model"
-      :label="showLabel?attr.name:undefined"
-      :prop="attr.prop ? attr.prop : attr.model">
-      <a-select
-        v-if="!attr.lazyLoad || attr.lazyLoad === 'false'"
-        v-model="form[attr.model]"
-        :disabled="disabled"
-        @change="attr.dataChangeFunc && debouncedDataChangeFunc()"
-        :filter-option="filterOption"
-        :getPopupContainer=" triggerNode => { return triggerNode.parentNode } "
-        :placeholder="attr.placeholder ? attr.placeholder : '请选择'"
-        show-search
-      >
-        <a-select-option
-          v-if="mode === '查询'"
-          key="999999"
-          value="">全部
-        </a-select-option>
-        <template v-if="attr.keys">
-          <a-select-option
-            v-for="(item,index) in attr.keys"
-            :key="index.value"
-            :value="item.value">
-            {{ item.label }}
-          </a-select-option>
-        </template>
-        <template v-else>
-          <template
-            v-if="attr.keyName.indexOf('logic@') !== -1 || attr.keyName.indexOf('config@') !== -1
-              ||attr.keyName.indexOf('search@') !== -1 || attr.keyName.indexOf('search@') !== -1">
-            <a-select-option
-              v-for="(item,index) in option"
-              :key="index.value"
-              :value="item.value">
-              <template v-if="attr.keyName.indexOf('config@') !== -1 && item.status">
-                <!-- 徽标(badge) -->
-                <a-badge v-if="item.status !== 'gary'" :color="item.status" :text="item.label"/>
-                <a-badge v-else color="#D9D9D9" :text="item.label"/>
-              </template>
-              <template v-else>
-                {{ item.label }}
-              </template>
-            </a-select-option>
-          </template>
-          <template
-            v-else-if="attr.keyName.indexOf('async ') !== -1 || attr.keyName.indexOf('function ') !== -1">
-            <a-select-option
-              v-for="(item,index) in optionForFunc"
-              :key="index.value"
-              :value="item.value">
-              <template>
-                {{ item.label }}
-              </template>
-            </a-select-option>
-          </template>
-          <template v-else>
-            <a-select-option
-              v-for="item in $appdata.getDictionaryList(attr.keyName)"
-              :key="item.value"
-              :value="item.value">
-              <!-- 徽标(badge) -->
-              <x-badge
-                :badge-key="attr.keyName"
-                :replaceText="item.text"
-                :value="item.value"
-                :service-name="serviceName"
-                :env="env"/>
-            </a-select-option>
-          </template>
-        </template>
-      </a-select>
-      <a-select
-        v-else
-        v-model="form[attr.model]"
-        :disabled="disabled"
-        @change="attr.dataChangeFunc && debouncedDataChangeFunc()"
-        :filter-option="filterOption"
-        :getPopupContainer=" triggerNode => { return triggerNode.parentNode } "
-        :placeholder="attr.placeholder ? attr.placeholder : '搜索' + attr.name"
-        show-search
-        @search="fetchFunction"
-      >
-        <a-spin v-if="searching" slot="notFoundContent" size="small"/>
-        <a-select-option
-          v-if="mode === '查询'"
-          key="999999"
-          value="">全部
-        </a-select-option>
-        <a-select-option
-          v-for="(item,index) in option"
-          :key="index"
-          :value="item.value">{{ item.label }}
-        </a-select-option>
-      </a-select>
-    </a-form-model-item>
-  </x-form-col>
-  <!-- 多选框 -->
-  <x-form-col
-    v-else-if="attr.type === 'checkbox' && show"
-    :flex="attr.flex">
-    <a-form-model-item
-      :ref="attr.model"
-      :label="showLabel?attr.name:undefined"
-      :prop="attr.prop ? attr.prop : attr.model">
-      <a-select
-        v-if="!attr.lazyLoad || attr.lazyLoad === 'false'"
-        v-model="form[attr.model]"
-        :disabled="disabled"
-        :filter-option="filterOption"
-        :getPopupContainer=" triggerNode => { return triggerNode.parentNode } "
-        :placeholder="attr.placeholder ? attr.placeholder : '请选择'"
-        @change="attr.dataChangeFunc && debouncedDataChangeFunc()"
-        mode="multiple"
-        show-search
-        allowClear
-      >
-        <template v-if="attr.keys">
-          <a-select-option
-            v-for="(item,index) in attr.keys"
-            :key="index"
-            :value="item.value">
-            {{ item.label }}
-          </a-select-option>
-        </template>
-        <template v-else>
-          <template
-            v-if="attr.keyName.indexOf('logic@') !== -1 || attr.keyName.indexOf('config@') !== -1
-              ||attr.keyName.indexOf('search@') !== -1 || attr.keyName.indexOf('search@') !== -1">
-            <a-select-option
-              v-for="(item,index) in option"
-              :key="index"
-              :value="item.value">{{ item.label }}
-            </a-select-option>
-          </template>
-          <template v-else>
-            <a-select-option
-              v-for="item in $appdata.getDictionaryList(attr.keyName)"
-              :key="item.value"
-              :value="item.value">{{ item.text }}
-            </a-select-option>
-          </template>
-        </template>
-      </a-select>
-      <a-select
-        v-else
-        v-model="form[attr.model]"
-        :disabled="disabled"
-        :filter-option="filterOption"
-        :getPopupContainer=" triggerNode => { return triggerNode.parentNode } "
-        :placeholder="attr.placeholder ? attr.placeholder : '搜索' + attr.name"
-        mode="multiple"
-        @change="attr.dataChangeFunc && debouncedDataChangeFunc()"
-        show-search
-        allowClear
-        @search="fetchFunction"
-      >
-        <a-spin v-if="searching" slot="notFoundContent" size="small"/>
-        <a-select-option
-          v-for="(item,index) in option"
-          :key="index"
-          :value="item.value">{{ item.label }}
-        </a-select-option>
-      </a-select>
-    </a-form-model-item>
-  </x-form-col>
-  <!-- 单选框 -->
-  <x-form-col
-    v-else-if="attr.type === 'radio' && show"
-    :flex="attr.flex">
-    <a-form-model-item
-      :ref="attr.model"
-      :label="showLabel?attr.name:undefined"
-      :prop="attr.prop ? attr.prop : attr.model">
-      <a-radio-group
-        v-model="form[attr.model]"
-        @change="attr.dataChangeFunc && debouncedDataChangeFunc()"
-      >
-        <template v-if="attr.keys">
-          <a-radio v-for="(item,index) in attr.keys" :key="index" :value="item.value">
-            {{ item.label }}
-          </a-radio>
-        </template>
-        <template v-else>
-          <template
-            v-if="attr.keyName.indexOf('logic@') !== -1 || attr.keyName.indexOf('config@') !== -1
-              ||attr.keyName.indexOf('search@') !== -1 || attr.keyName.indexOf('search@') !== -1">
-            <a-radio v-for="(item,index) in option" :key="index" :value="item.value">
-              {{ item.label }}
-            </a-radio>
-          </template>
-          <template v-else>
-            <a-radio v-for="(item,index) in $appdata.getDictionaryList(attr.keyName)" :key="index" :value="item.value">
-              {{ item.text }}
-            </a-radio>
-          </template>
-        </template>
-      </a-radio-group>
-    </a-form-model-item>
-  </x-form-col>
-  <!-- 日期范围选择器 -->
-  <x-form-col
-    v-else-if="attr.type === 'rangePicker' && show"
-    :flex="attr.flex">
-    <a-form-model-item
-      :ref="attr.model"
-      :label="showLabel?attr.name:undefined"
-      :prop="attr.prop ? attr.prop : attr.model">
-      <a-date-picker
-        @change="attr.dataChangeFunc && debouncedDataChangeFunc()"
-        v-if="mode === '新增/修改'"
-        v-model="form[attr.model]"
-        :disabled="disabled"
-        :show-time="true"
-        style="width: 100%;"
-        valueFormat="YYYY-MM-DD HH:mm:ss"/>
-      <a-range-picker
-        v-else
-        @change="attr.dataChangeFunc && debouncedDataChangeFunc()"
-        v-model="form[attr.model]"
-        :disabled="disabled"
-        :show-time="true"
-        valueFormat="YYYY-MM-DD HH:mm:ss"
-        style="width: 100%;"
-      />
-    </a-form-model-item>
-  </x-form-col>
-  <!-- 月份选择器 -->
-  <x-form-col
-    v-else-if="attr.type === 'monthPicker' && show"
-    :flex="attr.flex">
-    <a-form-model-item
-      :ref="attr.model"
-      :label="showLabel?attr.name:undefined"
-      :prop="attr.prop ? attr.prop : attr.model">
-      <a-month-picker
-        @change="attr.dataChangeFunc && debouncedDataChangeFunc()"
-        v-model="form[attr.model]"
-        :disabled="disabled"
-        :show-time="true"
-        valueFormat="YYYY-MM"
-        style="width: 100%;"
-      />
-    </a-form-model-item>
-  </x-form-col>
-  <!-- 年份选择器 -->
-  <x-form-col
-    v-else-if="attr.type === 'yearPicker' && show"
-    :flex="attr.flex">
-    <a-form-model-item
-      :ref="attr.model"
-      :label="showLabel?attr.name:undefined"
-      :prop="attr.prop ? attr.prop : attr.model">
-      <a-date-picker
-        @change="attr.dataChangeFunc && debouncedDataChangeFunc()"
-        v-model="form[attr.model]"
-        :disabled="disabled"
-        format="YYYY"
-        mode="year"
-        v-decorator="['year']"
-        placeholder="请选择年份"
-        :open="yearShowOne"
-        style="width: 100%;"
-        @openChange="openChangeOne"
-        @panelChange="panelChangeOne"/>
-    </a-form-model-item>
-  </x-form-col>
-  <!-- 单日选择器 -->
-  <x-form-col
-    v-else-if="attr.type === 'datePicker' && show"
-    :flex="attr.flex">
-    <a-form-model-item
-      :ref="attr.model"
-      :label="showLabel?attr.name:undefined"
-      :prop="attr.prop ? attr.prop : attr.model">
-      <a-range-picker
-        @change="attr.dataChangeFunc && debouncedDataChangeFunc()"
-        v-if="mode === '查询' && attr.queryType === 'BETWEEN' "
-        v-model="form[attr.model]"
-        :disabled="disabled"
-        :show-time="true"
-        style="width: 100%;"
-        format="YYYY-MM-DD"
-        valueFormat="YYYY-MM-DD HH:mm:ss"/>
-      <a-date-picker
-        @change="attr.dataChangeFunc && debouncedDataChangeFunc()"
-        v-else-if="mode === '查询'"
-        v-model="form[attr.model]"
-        :disabled="disabled"
-        style="width: 100%;"
-        valueFormat="YYYY-MM-DD"/>
-      <a-date-picker
-        v-else
-        @change="attr.dataChangeFunc && debouncedDataChangeFunc()"
-        v-model="form[attr.model]"
-        :disabled="disabled"
-        style="width: 100%;"
-        :show-time="{ defaultValue: moment('00:00:00', 'HH:mm:ss') }"
-        valueFormat="YYYY-MM-DD HH:mm:ss"/>
-    </a-form-model-item>
-  </x-form-col>
-  <!-- 文本域 -->
-  <a-col
-    v-else-if="attr.type === 'textarea' && show"
-    :style="layout === 'inline'?{width:'calc(100% - 60px)'}:{}"
-    :xs="24"
-    :sm="24"
-    :md="24"
-    :lg="24"
-    :xl="24"
-    :xxl="24">
-    <a-form-model-item
-      :labelCol="layout === 'inline'?{span:2}:undefined"
-      :wrapperCol="layout === 'inline'?{span:22}:undefined"
-      :ref="attr.model"
-      :label="showLabel?attr.name:undefined"
-      :prop="attr.prop ? attr.prop : attr.model">
-      <a-textarea
-        v-model="form[attr.model]"
-        style="width: 100%;"
-        :disabled="disabled"
-        :placeholder="attr.placeholder ? attr.placeholder : '请输入'+attr.name.replace(/\s*/g, '')"
-        :rows="4"/>
-    </a-form-model-item>
-  </a-col>
-  <!-- 文件上传 -->
-  <a-col
-    v-else-if="(attr.type === 'file' || attr.type === 'image') && show"
-    :style="layout === 'inline'?{width:'calc(100% - 60px)'}:{}"
-    :xs="24"
-    :sm="24"
-    :md="24"
-    :lg="24"
-    :xl="24"
-    :xxl="24">
-    <a-form-model-item
-      :labelCol="layout === 'inline'?{span:2}:undefined"
-      :wrapperCol="layout === 'inline'?{span:22}:undefined"
-      :ref="attr.model"
-      :label="showLabel?attr.name:undefined"
-      :prop="attr.prop ? attr.prop : attr.model">
-      <upload
-        :files="files"
-        :images="images"
-        :model="attr"
-        :uploadStyle="attr.uploadStyle"
-        :service-name="serviceName"
-        @setFiles="setFiles"></upload>
-    </a-form-model-item>
-  </a-col>
-  <!-- 省市区选择框 -->
-  <x-form-col
-    v-else-if="attr.type === 'citySelect' && show"
-    :flex="attr.flex">
-    <a-form-model-item
-      :ref="attr.model"
-      :label="showLabel?attr.name:undefined"
-      :prop="attr.prop ? attr.prop : attr.model">
-      <citySelect
-        @change="attr.dataChangeFunc && debouncedDataChangeFunc()"
-        ref="citySelect"
-        v-model="form[attr.model]"
-        :contexts="attr.contexts"
-        :value-type="attr.valueType"
-        :default-value="form[attr.model]"></citySelect>
-    </a-form-model-item>
-  </x-form-col>
-  <!-- 地点搜索框 -->
-  <x-form-col
-    v-else-if="attr.type === 'addressSearch' && show"
-    :flex="attr.flex">
-    <a-form-model-item
-      :ref="attr.model"
-      :label="showLabel?attr.name:undefined"
-      :prop="attr.prop ? attr.prop : attr.model"
-      :labelCol="layout === 'inline' && attr.occupyCol ? labelAndWrapperCol[attr.occupyCol].labelCol:undefined"
-      :wrapperCol="layout === 'inline'&& attr.occupyCol ? labelAndWrapperCol[attr.occupyCol].wrapperCol:undefined"
-      :style="layout === 'inline'&& attr.occupyCol && attr.occupyCol > 1? {width:`calc(100% - ${attr.occupyCol * 1.533}rem)`}:{}">
-      <address-search-combobox
-        :emitFunc="emitFunc"
-        :attr="attr"
-        :read-only="readOnly"
-        v-model="searchResult"
-        :resultKeys="{ address: attr.model, coords: `${attr.model}_lng_lat` }"
-        ref="addressSearchCombobox"
-        searchResultType="Object"
-        @onSelect="addressSearchComboboxSelect"
-        @onDivisionsChange="onDivisionsChange"
-      ></address-search-combobox>
-    </a-form-model-item>
-  </x-form-col>
-  <!-- 富文本 -->
-  <x-form-col
-    v-else-if="attr.type === 'richText' && show"
-    :flex="attr.flex">
-    <a-form-model-item :ref="attr.model" :prop="attr.prop ? attr.prop : attr.model">
-      <RichTextModal ref="richTextModal" style="height: 500px"></RichTextModal>
-    </a-form-model-item>
-  </x-form-col>
-  <!-- 人员选择框 -->
-  <x-form-col
-    v-else-if="attr.type === 'personSetting' && show"
-    :flex="attr.flex">
-    <a-form-model-item
-      :ref="attr.model"
-      :label="showLabel?attr.name:undefined"
-      :prop="attr.prop ? attr.prop : attr.model">
-      <PersonSetting v-model="form[attr.model]"></PersonSetting>
-    </a-form-model-item>
-  </x-form-col>
-  <!-- 树形选择框 -->
-  <x-form-col
-    v-else-if="attr.type === 'treeSelect' && show"
-    :flex="attr.flex">
-    <x-tree-select
-      @onChange="attr.dataChangeFunc && debouncedDataChangeFunc()"
-      v-model="form[attr.model]"
-      :attr="attr"
-      ref="xTreeSelect">
-    </x-tree-select>
-  </x-form-col>
-  <!-- 评分框 -->
-  <x-form-col
-    v-else-if="attr.type === 'rate' && show"
-    :flex="attr.flex">
-    <a-form-model-item
-      :ref="attr.model"
-      :label="showLabel?attr.name:undefined"
-      :prop="attr.prop ? attr.prop : attr.model">
-      <a-rate
-        v-model="form[attr.model]"
-        @change="attr.dataChangeFunc && debouncedDataChangeFunc()"
-      />
-    </a-form-model-item>
-  </x-form-col>
-  <!--  区间选择器  -->
-  <x-form-col
-    v-else-if="attr.type === 'intervalPicker' && show"
-    :flex="attr.flex">
-    <a-form-model-item
-      :ref="attr.model"
-      :label="showLabel?attr.name:undefined"
-      :prop="attr.prop ? attr.prop : attr.model">
-      <a-input
-        v-if="mode === '新增/修改'"
-        v-model="form[attr.model]"
-        :whitespace="true"
-        :read-only="readOnly"
-        :disabled="disabled && !readOnly"
-        style="width:100%"
-        @blur="attr.inputOnBlurFunc && emitFunc(attr.inputOnBlurFunc,attr)"
-        :placeholder="attr.placeholder ? attr.placeholder : '请输入'+attr.name.replace(/\s*/g, '')"
-        :ref="`${attr.model}input`"/>
-      <a-input-group v-else compact>
-        <a-input
-          v-model="form[attr.model][0]"
-          class="intervalPicker-begin"
-          placeholder="起始值"/>
-        <a-input
-          class="intervalPicker-center"
-          style="backgroundColor: #fff"
-          placeholder="~"
-          disabled
-        />
-        <a-input
-          v-model="form[attr.model][1]"
-          class="intervalPicker-end"
-          placeholder="结束值"/>
-      </a-input-group>
-    </a-form-model-item>
-  </x-form-col>
-  <!--  车牌号选择  -->
-  <x-form-col
-    v-else-if="attr.type === 'licensePlate' && show"
-    :flex="attr.flex">
-    <a-form-model-item
-      :ref="attr.model"
-      :label="showLabel?attr.name:undefined"
-      :style="layout === 'inline'&& attr.occupyCol && attr.occupyCol > 1? {width:`calc(100% - ${attr.occupyCol * 1.533}rem)`}:{}"
-      :prop="attr.prop ? attr.prop : attr.model">
-      <!--  如果配置了后置按钮插槽    -->
-      <a-input
-        v-if="mode ==='查询'"
-        v-model="form[attr.model]"
-        :whitespace="true"
-        :read-only="readOnly"
-        :disabled="disabled && !readOnly"
-        style="width:100%"
-        @blur="attr.inputOnBlurFunc && emitFunc(attr.inputOnBlurFunc,attr)"
-        :placeholder="attr.placeholder ? attr.placeholder : '请输入'+attr.name.replace(/\s*/g, '')"
-        :ref="`${attr.model}input`"/>
-      <x-license-plate
-        v-else
-        v-model="form[attr.model]"
-        @change="attr.dataChangeFunc && debouncedDataChangeFunc()"
-      ></x-license-plate>
-    </a-form-model-item>
-  </x-form-col>
-</template>
-<script>
-
-import { debounce } from 'ant-design-vue/lib/vc-table/src/utils'
-import XFormCol from '@vue2-client/base-client/components/common/XFormCol'
-import XBadge from '@vue2-client/base-client/components/common/XBadge'
-import CitySelect from '@vue2-client/base-client/components/common/CitySelect'
-import PersonSetting from '@vue2-client/base-client/components/common/PersonSetting'
-import AddressSearchCombobox from '@vue2-client/base-client/components/common/AddressSearchCombobox'
-import Upload from '@vue2-client/base-client/components/common/Upload'
-import moment from 'moment'
-import { upload, getConfigByName, runLogic, getConfigByNameAsync } from '@vue2-client/services/api/common'
-import util, { uuid } from '.././../../../utils/util'
-import XTreeSelect from '@vue2-client/base-client/components/common/XForm/XTreeSelect'
-import { searchToListOption, searchToOption } from '@vue2-client/services/v3Api'
-import { mapState } from 'vuex'
-import { executeStrFunction } from '@vue2-client/utils/runEvalFunction'
-import RichTextModal from '../richTextModal/index.vue'
-import XLicensePlate from '@vue2-client/base-client/components/common/XLicensePlate/XLicensePlate.vue'
-
-export default {
-  name: 'XFormItem',
-  components: {
-    XLicensePlate,
-    XTreeSelect,
-    XFormCol,
-    XBadge,
-    CitySelect,
-    PersonSetting,
-    AddressSearchCombobox,
-    Upload,
-    RichTextModal
-  },
-  data () {
-    // 检索去抖
-    this.fetchFunction = debounce(this.fetchFunction, 800)
-    return {
-      option: [],
-      // 最后检索版本
-      lastFetchId: 0,
-      // 检索中
-      searching: false,
-      searchResult: '',
-      yearShowOne: false,
-      optionForFunc: [],
-      // 控制当前表单项是否展示
-      show: true,
-      labelAndWrapperCol: [{
-        labelCol: undefined,
-        wrapperCol: undefined
-      },
-        {
-          labelCol: undefined,
-          wrapperCol: undefined
-        },
-        {
-          labelCol: { span: 3 },
-          wrapperCol: { span: 21 }
-        },
-        {
-          labelCol: { span: 2 },
-          wrapperCol: { span: 22 }
-        }],
-      // moment
-      moment
-    }
-  },
-  props: {
-    attr: {
-      type: Object,
-      default:
-        () => {
-          return {}
-        }
-    },
-    form: {
-      type: Object,
-      required:
-        true
-    },
-    disabled: {
-      type: Boolean,
-      default:
-        () => {
-          return false
-        }
-    },
-    readOnly: {
-      type: Boolean,
-      default:
-        () => {
-          return false
-        }
-    },
-    mode: {
-      type: String,
-      default:
-        () => {
-          return '查询'
-        }
-    },
-    files: {
-      type: Array,
-      default:
-        () => {
-          return []
-        }
-    },
-    images: {
-      type: Array,
-      default:
-        () => {
-          return []
-        }
-    },
-    serviceName: {
-      type: String,
-      default:
-      undefined
-    },
-    // 调用logic获取数据源的追加参数
-    getDataParams: {
-      type: Object,
-      default:
-      undefined
-    },
-    // 布局
-    layout: {
-      type: String,
-      default:
-        'horizontal'
-    },
-    // 环境
-    env: {
-      type: String,
-      default:
-        () => {
-          return 'prod'
-        }
-    },
-    // 设置表单值
-    setForm: {
-      type: Function,
-      default: (val) => {
-        console.log(val)
-      }
-    },
-    showLabel: {
-      type: Boolean,
-      default:
-        () => {
-          return true
-        }
-    }
-  },
-  async created () {
-    this.init()
-    if (this.attr.keyName && (this.attr?.keyName?.toString().indexOf('async ') !== -1 || this.attr?.keyName?.toString()?.indexOf('function') !== -1)) {
-      this.debouncedUpdateOptions = debounce(this.updateOptions, 200)
-    }
-    if (this.attr.dataChangeFunc) {
-      this.debouncedDataChangeFunc = debounce(this.dataChangeFunc, 200)
-    }
-    if (this.attr.showFormItemFunc) {
-      this.debouncedShowFormItemFunc = debounce(this.showFormItemFunc, 100)
-      // 执行一次
-      debounce(this.showFormItemFunc, 100)()
-    }
-    if (this.attr.showQueryFormItemFunc) {
-      this.debouncedShowQueryFormItemFunc = debounce(this.showQueryFormItemFunc, 100)
-      // 执行一次
-      debounce(this.showQueryFormItemFunc, 100)()
-    }
-    // 人员联动框增加监听
-    if (this?.attr?.keyName?.toString()?.startsWith('search@根据表单项[') && this?.attr?.keyName?.toString().endsWith(']联动人员')) {
-      this.debouncedUserLinkFunc = debounce(() => this.updateResOptions('人员'), 200)
-    }
-    if (this?.attr?.keyName?.toString()?.startsWith('search@根据表单项[') && this?.attr?.keyName?.toString().endsWith(']联动部门')) {
-      this.debouncedDepLinkFunc = debounce(() => this.updateResOptions('部门'), 200)
-    }
-  },
-  computed: {
-    ...mapState('account', { currUser: 'user' })
-  },
-  watch: {
-    attr: {
-      handler () {
-        this.init()
-      },
-      deep: true
-    },
-    form: {
-      handler (newVal, oldVal) {
-        // 如果是从函数获取 options
-        if (this.attr.keyName && (this.attr.keyName.toString().indexOf('async ') !== -1 || this.attr.keyName.toString().indexOf('function') !== -1)) {
-          this.debouncedUpdateOptions()
-        }
-        // 如果有自定义是否展示表单项函数
-        if (this.attr.showFormItemFunc) {
-          this.debouncedShowFormItemFunc()
-        }
-        // 如果有自定义是否展示查询表单项函数
-        if (this.attr.showQueryFormItemFunc) {
-          this.debouncedShowQueryFormItemFunc()
-        }
-        // 地址搜索框赋值
-        if (this.attr.type === 'addressSearch') {
-          this.$refs.addressSearchCombobox.addressInput = this.form[this.attr.model]
-        }
-        // 数据源来自人员联动时更新数据
-        if (this?.attr?.keyName?.toString()?.startsWith('search@根据表单项[') && this?.attr?.keyName?.toString().endsWith(']联动人员')) {
-          this.debouncedUserLinkFunc()
-        }
-        // 数据源来自人员联动时更新数据
-        if (this?.attr?.keyName?.toString()?.startsWith('search@根据表单项[') && this?.attr?.keyName?.toString().endsWith(']联动部门')) {
-          this.debouncedDepLinkFunc()
-        }
-      },
-      deep: true
-    }
-  },
-  methods: {
-    focusInput () {
-      if (this.attr.defaultFocus) {
-        this.$nextTick(h => {
-          const el = this.$refs[`${this.attr.model}input`]?.$el
-          let inputEl
-          if (el) {
-            if (el.tagName.toLowerCase() === 'input') {
-              inputEl = el
-            } else {
-              inputEl = el.querySelector('input')
-            }
-          }
-          if (inputEl) {
-            inputEl.focus()
-            if (inputEl.type === 'number') {
-              if (inputEl.valueAsNumber) {
-                inputEl.setSelectionRange(0, inputEl.valueAsNumber.toString().length)
-              }
-            } else {
-              if (inputEl.value) {
-                inputEl.setSelectionRange(0, inputEl.value.length)
-              }
-            }
-          }
-        })
-      }
-    },
-    // 更新人员下拉框数据
-    async updateResOptions (type) {
-      if (this?.attr?.keyName?.toString()?.startsWith('search@根据表单项[') && this?.attr?.keyName?.toString()?.endsWith(`]联动${type}`)) {
-        const searchData = { source: `获取${type}`, userid: this.currUser.id }
-        const startIndex = this.attr.keyName.indexOf('[') + 1
-        const endIndex = this.attr.keyName.indexOf(']', startIndex)
-        const fromModel = this.attr.keyName.substring(startIndex, endIndex).replace('.', '_')
-        const formModelData = this.form[fromModel]
-        if (fromModel?.length && formModelData?.length) {
-          await searchToListOption(searchData, res => {
-            this.getDataCallback(
-              res.filter(h => {
-                  if (fromModel.indexOf('org') > -1) {
-                    return formModelData?.includes(h.orgid || h.f_organization_id || h.parentid)
-                  } else {
-                    return formModelData?.includes(h?.parentid)
-                  }
-                }
-              )
-            )
-          })
-        }
-      }
-    },
-    // js 函数作为数据源
-    async updateOptions () {
-      if (this.attr.keyName && (this.attr.keyName.indexOf('async ') !== -1 || this.attr.keyName.indexOf('function ') !== -1)) {
-        this.optionForFunc = await executeStrFunction(this.attr.keyName, [this.form, runLogic, this.mode, getConfigByNameAsync])
-      }
-    },
-    async dataChangeFunc () {
-      if (this.attr.dataChangeFunc) {
-        await executeStrFunction(this.attr.dataChangeFunc, [this.form, this.setForm, this.attr, util, this.mode, runLogic, getConfigByNameAsync])
-      }
-    },
-    async showFormItemFunc () {
-      if (this.attr.showFormItemFunc) {
-        const obj = executeStrFunction(this.attr.showFormItemFunc, [this.form, this.setForm, this.attr, util, this.mode])
-        // 判断是 bool 还是  obj  兼容
-        if (typeof obj === 'boolean') {
-          this.show = obj
-        } else if (obj && typeof obj === 'object') {
-          // obj 是一个对象，并且不是数组
-          this.show = obj?.show
-          this.readOnly = obj?.readOnly
-        }
-      } else {
-        this.show = true
-      }
-    },
-    async showQueryFormItemFunc () {
-      if (this.attr.showQueryFormItemFunc) {
-        const obj = executeStrFunction(this.attr.showQueryFormItemFunc, [this.form, this.setForm, this.attr, util, this.mode])
-        // 判断是 bool 还是  obj  兼容
-        if (typeof obj === 'boolean') {
-          this.show = obj
-        } else if (obj && typeof obj === 'object') {
-          // obj 是一个对象，并且不是数组
-          this.show = obj?.show
-          this.readOnly = obj?.readOnly
-        }
-      } else {
-        this.show = true
-      }
-    },
-    init () {
-      if (this.mode === '新增/修改' && !this.attr.flex) {
-        if (['horizontal', 'vertical'].includes(this.layout)) {
-          // 新增修改表单 horizontal 模式下默认为一行
-          this.attr.flex = {
-            xs: 24,
-            sm: 24,
-            md: 24,
-            lg: 24,
-            xl: 24,
-            xxl: 24
-          }
-        } else {
-          if (['input', 'addressSearch'] && this.attr.occupyCol) {
-            // 如果是 input 看是否配置了 占用列配置
-            this.attr.flex = {
-              xs: 8 * this.attr.occupyCol,
-              sm: 8 * this.attr.occupyCol,
-              md: 8 * this.attr.occupyCol,
-              lg: 8 * this.attr.occupyCol,
-              xl: 8 * this.attr.occupyCol,
-              xxl: 8 * this.attr.occupyCol
-            }
-          } else {
-            // 新增修改表单 vertical 模式下默认为1列
-            this.attr.flex = {
-              xs: 24,
-              sm: 24,
-              md: 24,
-              lg: 12,
-              xl: 8,
-              xxl: 8
-            }
-          }
-        }
-      } else {
-        this.attr.flex = {
-          xs: 24,
-          sm: 24,
-          md: 24,
-          lg: 8,
-          xl: 6,
-          xxl: 6
-        }
-      }
-      if (this.attr.type === 'radio') {
-        this.initRadioValue()
-      } else if (this.attr.type === 'richText') {
-        this.initRichText()
-      } else if (this.attr.keyName && typeof this.attr.keyName === 'string') {
-        if (this.attr.keyName.indexOf('logic@') !== -1) {
-          this.getData({}, res => this.getDataCallback(res))
-        } else if (this.attr.keyName.indexOf('search@') !== -1) {
-          // `tool.getFullTree(this.getRights().where(row.getType()==$organization$))`
-          // 判断是否根据角色查询
-          let source = this.attr.keyName.substring(7)
-          const userid = this.currUser.id
-          let roleName = 'roleName'
-          if (source.startsWith('根据角色[') && source.endsWith(']获取人员')) {
-            const startIndex = source.indexOf('[') + 1
-            const endIndex = source.indexOf(']', startIndex)
-            roleName = source.substring(startIndex, endIndex)
-            source = '根据角色获取人员'
-          }
-          const searchData = { source, userid, roleName }
-          // 判断是否根据某个表单项联动 仅返回列表结构并筛选
-          if (source.startsWith('根据表单项[') && source.endsWith(']联动人员')) {
-            this.updateResOptions('人员')
-          } else if (source.startsWith('根据表单项[') && source.endsWith(']联动部门')) {
-            this.updateResOptions('部门')
-          } else if (this.attr.type === 'select' || this.attr.type === 'checkbox') {
-            // 仅获取最内层数据
-            searchToListOption(searchData, res => this.getDataCallback(res))
-          } else {
-            // 其他资源通用逻辑
-            searchToOption(searchData, res => this.getDataCallback(res))
-          }
-        } else if (this.attr.keyName.indexOf('config@') !== -1) {
-          const configName = this.attr.keyName.substring(7)
-          getConfigByName(configName, this.serviceName, res => {
-            this.getDataCallback(res.value)
-          }, this.env === 'dev')
-        } else if (this.attr.keyName.indexOf('async ') !== -1 || this.attr.keyName.indexOf('function ') !== -1) {
-          this.updateOptions()
-        }
-      }
-      this.focusInput()
-    },
-    addressSearchComboboxSelect (data) {
-      this.form = Object.assign(this.form, JSON.parse(data))
-    },
-    onDivisionsChange (data) {
-      this.emitFunc('addressSearchComboboxSelect', {
-        key: this.attr.model,
-        value: data
-      })
-    },
-    getDataCallback (res) {
-      this.option = res
-      if (this.attr.type === 'treeSelect') {
-        this.$refs.xTreeSelect.init({
-          option: this.option,
-          form: this.form,
-          queryType: this.attr.queryType,
-          name: this.attr.name,
-          model: this.attr.model,
-          mode: this.mode,
-          disabled: this.disabled
-        })
-      } else if (this.attr.type === 'radio') {
-        this.initRadioValue()
-      }
-    },
-    initRadioValue () {
-      const model = this.attr.model
-      if (this.mode === '新增/修改' && this.attr.type === 'radio' && !this.form[model] && !this.attr.prop) {
-        if (this.attr.keys && this.attr.keys.length > 0) {
-          this.form[model] = this.attr.keys[0].value
-        } else if (this.option && this.option.length > 0) {
-          this.form[model] = this.option[0].value
-        } else if (this.attr.keyName) {
-          const list = this.$appdata.getDictionaryList(this.attr.keyName)
-          if (list.length > 0) {
-            this.form[model] = list[0].value
-          }
-        }
-      }
-    },
-    async initRichText () {
-      const logicName = this.attr.keyName
-      if (logicName) {
-        this.getData({}, async res => {
-          try {
-            const response = await fetch(res.url) // 等待 fetch 完成
-            if (response.ok) {
-              const data = await response.text() // 等待解析为文本内容
-              const richText = JSON.parse(data)
-              this.$refs.richTextModal.init({
-                richText: richText
-              })
-            } else {
-              this.$message.error('富文本读取失败，请求结果：' + response.statusText)
-            }
-          } catch (error) {
-            this.$message.error('富文本读取失败，请求结果：' + error)
-          }
-        })
-      }
-    },
-    async getRichValue () {
-      if (this.$refs.richTextModal) {
-        const richText = this.$refs.richTextModal.getValue()
-        console.log('>>>> richText: ', richText)
-        const fileContent = JSON.stringify(richText)
-        const fileName = uuid() + '.txt'
-        // 创建一个 Blob 对象，类型为 text/plain
-        const blob = new Blob([fileContent], { type: 'text/plain' })
-        // 创建一个 File 对象（可选，但有助于保持一致性，因为 File 继承自 Blob）
-        const file = new File([blob], fileName, { type: blob.type })
-        // 组装上传数据
-        const headers = {
-          'Content-Type': 'multipart/form-data',
-        }
-        const formData = new FormData()
-        formData.append('avatar', file)
-        formData.append('resUploadMode', 'server')
-        formData.append('pathKey', 'Default')
-        formData.append('formType', 'file')
-        formData.append('useType', 'Default')
-        formData.append('filename', fileName)
-        formData.append('filesize', (blob.size / 1024 / 1024).toFixed(4))
-        formData.append('f_operator', this.currUser ? this.currUser.username : '')
-
-        // 上传文件
-        await upload(formData, this.serviceName, { headers, timeout: 600 * 1000 }, this.env === 'dev').then(res => {
-          this.form[this.attr.model] = res.data.id
-          this.form.t_f_path = res.data.f_downloadpath
-        }).catch(error => {
-          // 处理上传错误
-          console.error(error)
-        })
-      }
-    },
-    openChangeOne (status) {
-      if (status) {
-        this.yearShowOne = true
-      }
-    },
-    // 得到年份选择器的值
-    panelChangeOne (value) {
-      this.yearShowOne = false
-      this.form[this.attr.model] = value.format('YYYY')
-    },
-    // 文件框时设置上传组件的值
-    setFiles (fileIds) {
-      if (!this.form[this.attr.model]) {
-        this.form[this.attr.model] = []
-      }
-      this.form[this.attr.model] = [...fileIds]
-    },
-    // 懒加载检索方法
-    fetchFunction (value) {
-      this.lastFetchId += 1
-      const fetchId = this.lastFetchId
-      this.option = []
-      this.searching = true
-      this.getData({
-        word: value
-      }, res => {
-        if (fetchId !== this.lastFetchId) {
-          return
-        }
-        this.option = res
-        this.searching = false
-      })
-    },
-    // 获取数据
-    getData (value, callbackFun) {
-      if (value !== '') {
-        const logicName = this.attr.keyName
-        const logic = logicName.substring(6)
-        // 调用logic前设置参数
-        if (this.getDataParams && this.getDataParams[this.attr.model]) {
-          Object.assign(value, this.getDataParams[this.attr.model])
-        }
-        runLogic(logic, Object.assign(value, {
-          orgId: this.currUser.orgid,
-          userId: this.currUser.id
-        }), this.serviceName, this.env === 'dev').then(res => {
-          callbackFun(res)
-        }).catch(e => {
-          callbackFun([])
-          console.error('获取数据失败：' + e)
-        })
-      }
-    },
-    filterOption (input, option) {
-      const child = option.componentOptions.children[0]
-      if (child.text) {
-        return child.text.toLowerCase().indexOf(input.toLowerCase()) >= 0
-      } else if (child.elm.innerText) {
-        return child.elm.innerText.toLowerCase().indexOf(input.toLowerCase()) >= 0
-      } else {
-        return child.child.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
-      }
-    },
-    emitFunc (func, data) {
-      this.$emit('x-form-item-emit-func', func, data)
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.intervalPicker-begin {
-  width: calc(50% - 14px);
-}
-
-.intervalPicker-center {
-  width: 30px;
-  border-left: 0;
-  pointer-events: none;
-}
-
-.intervalPicker-end {
-  width: calc(50% - 14px);
-  border-left: 0;
-}
-</style>
+<template>
+  <!-- 输入框 -->
+  <x-form-col
+    v-if="attr.type === 'input' && show"
+    :flex="attr.flex">
+    <a-form-model-item
+      :ref="attr.model"
+      :label="showLabel?attr.name:undefined"
+      :labelCol="layout === 'inline' && attr.occupyCol ? labelAndWrapperCol[attr.occupyCol].labelCol:undefined"
+      :wrapperCol="layout === 'inline'&& attr.occupyCol ? labelAndWrapperCol[attr.occupyCol].wrapperCol:undefined"
+      :style="layout === 'inline'&& attr.occupyCol && attr.occupyCol > 1? {width:`calc(100% - ${attr.occupyCol * 1.533}rem)`}:{}"
+      :prop="attr.prop ? attr.prop : attr.model">
+      <!--  如果配置了后置按钮插槽    -->
+      <a-input-group
+        v-if="(attr.inputOnAfterName && attr.inputOnAfterFunc) || (attr.inputOnAfterIcon && attr.inputOnAfterIconFunc)"
+        style="display: flex; width: 100%;"
+        compact>
+        <a-input
+          v-model="form[attr.model]"
+          :read-only="readOnly"
+          :disabled="disabled && !readOnly"
+          :whitespace="true"
+          style="flex: 1; width: auto; min-width: 0;"
+          @change="attr.dataChangeFunc && debouncedDataChangeFunc()"
+          :suffix="attr.inputSuffix && mode !== '新增' ? attr.inputSuffix : ''"
+          @blur="attr.inputOnBlurFunc && emitFunc(attr.inputOnBlurFunc,attr)"
+          @keyup.enter="attr.inputOnEnterFunc && emitFunc(attr.inputOnEnterFunc, attr)"
+          :placeholder="attr.placeholder ? attr.placeholder : '请输入'+attr.name.replace(/\s*/g, '')"
+          :ref="`${attr.model}input`"/>
+        <a-button
+          v-if="attr.inputOnAfterName && attr.inputOnAfterFunc"
+          style="flex: 1; width: auto; min-width: 4rem;max-width: 6rem"
+          type="primary"
+          @click="emitFunc(attr.inputOnAfterFunc,form[attr.model])">
+          {{ attr.inputOnAfterName }}
+        </a-button>
+        <!--    仅可以配置 一个按钮 以及 一个图标插槽    -->
+        <a-button
+          style="width: 2rem; flex-shrink: 0;"
+          v-if="attr.inputOnAfterIcon"
+          :type="attr.inputOnAfterIcon && attr.inputOnAfterName ? 'primary' :''"
+          :icon="attr.inputOnAfterIcon || 'question'"
+          @click="emitFunc(attr.inputOnAfterIconFunc,form[attr.model])">
+        </a-button>
+      </a-input-group>
+      <a-input-number
+        v-else-if="attr.numberInput && !readOnly"
+        v-model="form[attr.model]"
+        :whitespace="true"
+        :disabled="disabled && !readOnly"
+        style="width:100%"
+        @blur="attr.inputOnBlurFunc && emitFunc(attr.inputOnBlurFunc,attr)"
+        @keyup.enter="attr.inputOnEnterFunc && emitFunc(attr.inputOnEnterFunc, attr)"
+        :suffix="attr.inputSuffix && mode !== '新增' ? attr.inputSuffix : ''"
+        :placeholder="attr.placeholder ? attr.placeholder : '请输入'+attr.name.replace(/\s*/g, '')"
+        :ref="`${attr.model}input`"/>
+      <a-input
+        v-else
+        v-model="form[attr.model]"
+        :whitespace="true"
+        :read-only="readOnly"
+        :disabled="disabled && !readOnly"
+        :suffix="attr.inputSuffix && mode !== '新增' ? attr.inputSuffix : ''"
+        style="width:100%"
+        @blur="attr.inputOnBlurFunc && emitFunc(attr.inputOnBlurFunc,attr)"
+        @keyup.enter="attr.inputOnEnterFunc && emitFunc(attr.inputOnEnterFunc, attr)"
+        :placeholder="attr.placeholder ? attr.placeholder : '请输入'+attr.name.replace(/\s*/g, '')"
+        :ref="`${attr.model}input`"/>
+
+    </a-form-model-item>
+  </x-form-col>
+  <!-- 下拉框 -->
+  <x-form-col
+    v-else-if="(attr.type === 'select' || (attr.type === 'rate' && mode==='查询')) && show"
+    :flex="attr.flex">
+    <a-form-model-item
+      :ref="attr.model"
+      :label="showLabel?attr.name:undefined"
+      :prop="attr.prop ? attr.prop : attr.model">
+      <a-select
+        v-if="!attr.lazyLoad || attr.lazyLoad === 'false'"
+        v-model="form[attr.model]"
+        :disabled="disabled"
+        @change="attr.dataChangeFunc && debouncedDataChangeFunc()"
+        :filter-option="filterOption"
+        :getPopupContainer=" triggerNode => { return triggerNode.parentNode } "
+        :placeholder="attr.placeholder ? attr.placeholder : '请选择'"
+        show-search
+      >
+        <a-select-option
+          v-if="mode === '查询'"
+          key="999999"
+          value="">全部
+        </a-select-option>
+        <template v-if="attr.keys">
+          <a-select-option
+            v-for="(item,index) in attr.keys"
+            :key="index.value"
+            :value="item.value">
+            {{ item.label }}
+          </a-select-option>
+        </template>
+        <template v-else>
+          <template
+            v-if="attr.keyName.indexOf('logic@') !== -1 || attr.keyName.indexOf('config@') !== -1
+              ||attr.keyName.indexOf('search@') !== -1 || attr.keyName.indexOf('search@') !== -1">
+            <a-select-option
+              v-for="(item,index) in option"
+              :key="index.value"
+              :value="item.value">
+              <template v-if="attr.keyName.indexOf('config@') !== -1 && item.status">
+                <!-- 徽标(badge) -->
+                <a-badge v-if="item.status !== 'gary'" :color="item.status" :text="item.label"/>
+                <a-badge v-else color="#D9D9D9" :text="item.label"/>
+              </template>
+              <template v-else>
+                {{ item.label }}
+              </template>
+            </a-select-option>
+          </template>
+          <template
+            v-else-if="attr.keyName.indexOf('async ') !== -1 || attr.keyName.indexOf('function ') !== -1">
+            <a-select-option
+              v-for="(item,index) in optionForFunc"
+              :key="index.value"
+              :value="item.value">
+              <template>
+                {{ item.label }}
+              </template>
+            </a-select-option>
+          </template>
+          <template v-else>
+            <a-select-option
+              v-for="item in $appdata.getDictionaryList(attr.keyName)"
+              :key="item.value"
+              :value="item.value">
+              <!-- 徽标(badge) -->
+              <x-badge
+                :badge-key="attr.keyName"
+                :replaceText="item.text"
+                :value="item.value"
+                :service-name="serviceName"
+                :env="env"/>
+            </a-select-option>
+          </template>
+        </template>
+      </a-select>
+      <a-select
+        v-else
+        v-model="form[attr.model]"
+        :disabled="disabled"
+        @change="attr.dataChangeFunc && debouncedDataChangeFunc()"
+        :filter-option="filterOption"
+        :getPopupContainer=" triggerNode => { return triggerNode.parentNode } "
+        :placeholder="attr.placeholder ? attr.placeholder : '搜索' + attr.name"
+        show-search
+        @search="fetchFunction"
+      >
+        <a-spin v-if="searching" slot="notFoundContent" size="small"/>
+        <a-select-option
+          v-if="mode === '查询'"
+          key="999999"
+          value="">全部
+        </a-select-option>
+        <a-select-option
+          v-for="(item,index) in option"
+          :key="index"
+          :value="item.value">{{ item.label }}
+        </a-select-option>
+      </a-select>
+    </a-form-model-item>
+  </x-form-col>
+  <!-- 多选框 -->
+  <x-form-col
+    v-else-if="attr.type === 'checkbox' && show"
+    :flex="attr.flex">
+    <a-form-model-item
+      :ref="attr.model"
+      :label="showLabel?attr.name:undefined"
+      :prop="attr.prop ? attr.prop : attr.model">
+      <a-select
+        v-if="!attr.lazyLoad || attr.lazyLoad === 'false'"
+        v-model="form[attr.model]"
+        :disabled="disabled"
+        :filter-option="filterOption"
+        :getPopupContainer=" triggerNode => { return triggerNode.parentNode } "
+        :placeholder="attr.placeholder ? attr.placeholder : '请选择'"
+        @change="attr.dataChangeFunc && debouncedDataChangeFunc()"
+        mode="multiple"
+        show-search
+        allowClear
+      >
+        <template v-if="attr.keys">
+          <a-select-option
+            v-for="(item,index) in attr.keys"
+            :key="index"
+            :value="item.value">
+            {{ item.label }}
+          </a-select-option>
+        </template>
+        <template v-else>
+          <template
+            v-if="attr.keyName.indexOf('logic@') !== -1 || attr.keyName.indexOf('config@') !== -1
+              ||attr.keyName.indexOf('search@') !== -1 || attr.keyName.indexOf('search@') !== -1">
+            <a-select-option
+              v-for="(item,index) in option"
+              :key="index"
+              :value="item.value">{{ item.label }}
+            </a-select-option>
+          </template>
+          <template v-else>
+            <a-select-option
+              v-for="item in $appdata.getDictionaryList(attr.keyName)"
+              :key="item.value"
+              :value="item.value">{{ item.text }}
+            </a-select-option>
+          </template>
+        </template>
+      </a-select>
+      <a-select
+        v-else
+        v-model="form[attr.model]"
+        :disabled="disabled"
+        :filter-option="filterOption"
+        :getPopupContainer=" triggerNode => { return triggerNode.parentNode } "
+        :placeholder="attr.placeholder ? attr.placeholder : '搜索' + attr.name"
+        mode="multiple"
+        @change="attr.dataChangeFunc && debouncedDataChangeFunc()"
+        show-search
+        allowClear
+        @search="fetchFunction"
+      >
+        <a-spin v-if="searching" slot="notFoundContent" size="small"/>
+        <a-select-option
+          v-for="(item,index) in option"
+          :key="index"
+          :value="item.value">{{ item.label }}
+        </a-select-option>
+      </a-select>
+    </a-form-model-item>
+  </x-form-col>
+  <!-- 单选框 -->
+  <x-form-col
+    v-else-if="attr.type === 'radio' && show"
+    :flex="attr.flex">
+    <a-form-model-item
+      :ref="attr.model"
+      :label="showLabel?attr.name:undefined"
+      :prop="attr.prop ? attr.prop : attr.model">
+      <a-radio-group
+        v-model="form[attr.model]"
+        @change="attr.dataChangeFunc && debouncedDataChangeFunc()"
+      >
+        <template v-if="attr.keys">
+          <a-radio v-for="(item,index) in attr.keys" :key="index" :value="item.value">
+            {{ item.label }}
+          </a-radio>
+        </template>
+        <template v-else>
+          <template
+            v-if="attr.keyName.indexOf('logic@') !== -1 || attr.keyName.indexOf('config@') !== -1
+              ||attr.keyName.indexOf('search@') !== -1 || attr.keyName.indexOf('search@') !== -1">
+            <a-radio v-for="(item,index) in option" :key="index" :value="item.value">
+              {{ item.label }}
+            </a-radio>
+          </template>
+          <template v-else>
+            <a-radio v-for="(item,index) in $appdata.getDictionaryList(attr.keyName)" :key="index" :value="item.value">
+              {{ item.text }}
+            </a-radio>
+          </template>
+        </template>
+      </a-radio-group>
+    </a-form-model-item>
+  </x-form-col>
+  <!-- 日期范围选择器 -->
+  <x-form-col
+    v-else-if="attr.type === 'rangePicker' && show"
+    :flex="attr.flex">
+    <a-form-model-item
+      :ref="attr.model"
+      :label="showLabel?attr.name:undefined"
+      :prop="attr.prop ? attr.prop : attr.model">
+      <a-date-picker
+        @change="attr.dataChangeFunc && debouncedDataChangeFunc()"
+        v-if="mode === '新增/修改'"
+        v-model="form[attr.model]"
+        :disabled="disabled"
+        :show-time="true"
+        style="width: 100%;"
+        valueFormat="YYYY-MM-DD HH:mm:ss"/>
+      <a-range-picker
+        v-else
+        @change="attr.dataChangeFunc && debouncedDataChangeFunc()"
+        v-model="form[attr.model]"
+        :disabled="disabled"
+        :show-time="true"
+        valueFormat="YYYY-MM-DD HH:mm:ss"
+        style="width: 100%;"
+      />
+    </a-form-model-item>
+  </x-form-col>
+  <!-- 月份选择器 -->
+  <x-form-col
+    v-else-if="attr.type === 'monthPicker' && show"
+    :flex="attr.flex">
+    <a-form-model-item
+      :ref="attr.model"
+      :label="showLabel?attr.name:undefined"
+      :prop="attr.prop ? attr.prop : attr.model">
+      <a-month-picker
+        @change="attr.dataChangeFunc && debouncedDataChangeFunc()"
+        v-model="form[attr.model]"
+        :disabled="disabled"
+        :show-time="true"
+        valueFormat="YYYY-MM"
+        style="width: 100%;"
+      />
+    </a-form-model-item>
+  </x-form-col>
+  <!-- 年份选择器 -->
+  <x-form-col
+    v-else-if="attr.type === 'yearPicker' && show"
+    :flex="attr.flex">
+    <a-form-model-item
+      :ref="attr.model"
+      :label="showLabel?attr.name:undefined"
+      :prop="attr.prop ? attr.prop : attr.model">
+      <a-date-picker
+        @change="attr.dataChangeFunc && debouncedDataChangeFunc()"
+        v-model="form[attr.model]"
+        :disabled="disabled"
+        format="YYYY"
+        mode="year"
+        v-decorator="['year']"
+        placeholder="请选择年份"
+        :open="yearShowOne"
+        style="width: 100%;"
+        @openChange="openChangeOne"
+        @panelChange="panelChangeOne"/>
+    </a-form-model-item>
+  </x-form-col>
+  <!-- 单日选择器 -->
+  <x-form-col
+    v-else-if="attr.type === 'datePicker' && show"
+    :flex="attr.flex">
+    <a-form-model-item
+      :ref="attr.model"
+      :label="showLabel?attr.name:undefined"
+      :prop="attr.prop ? attr.prop : attr.model">
+      <a-range-picker
+        @change="attr.dataChangeFunc && debouncedDataChangeFunc()"
+        v-if="mode === '查询' && attr.queryType === 'BETWEEN' "
+        v-model="form[attr.model]"
+        :disabled="disabled"
+        :show-time="true"
+        style="width: 100%;"
+        format="YYYY-MM-DD"
+        valueFormat="YYYY-MM-DD HH:mm:ss"/>
+      <a-date-picker
+        @change="attr.dataChangeFunc && debouncedDataChangeFunc()"
+        v-else-if="mode === '查询'"
+        v-model="form[attr.model]"
+        :disabled="disabled"
+        style="width: 100%;"
+        valueFormat="YYYY-MM-DD"/>
+      <a-date-picker
+        v-else
+        @change="attr.dataChangeFunc && debouncedDataChangeFunc()"
+        v-model="form[attr.model]"
+        :disabled="disabled"
+        style="width: 100%;"
+        :show-time="{ defaultValue: moment('00:00:00', 'HH:mm:ss') }"
+        valueFormat="YYYY-MM-DD HH:mm:ss"/>
+    </a-form-model-item>
+  </x-form-col>
+  <!-- 文本域 -->
+  <a-col
+    v-else-if="attr.type === 'textarea' && show"
+    :style="layout === 'inline'?{width:'calc(100% - 60px)'}:{}"
+    :xs="24"
+    :sm="24"
+    :md="24"
+    :lg="24"
+    :xl="24"
+    :xxl="24">
+    <a-form-model-item
+      :labelCol="layout === 'inline'?{span:2}:undefined"
+      :wrapperCol="layout === 'inline'?{span:22}:undefined"
+      :ref="attr.model"
+      :label="showLabel?attr.name:undefined"
+      :prop="attr.prop ? attr.prop : attr.model">
+      <a-textarea
+        v-model="form[attr.model]"
+        style="width: 100%;"
+        :disabled="disabled"
+        :placeholder="attr.placeholder ? attr.placeholder : '请输入'+attr.name.replace(/\s*/g, '')"
+        :rows="4"/>
+    </a-form-model-item>
+  </a-col>
+  <!-- 文件上传 -->
+  <a-col
+    v-else-if="(attr.type === 'file' || attr.type === 'image') && show"
+    :style="layout === 'inline'?{width:'calc(100% - 60px)'}:{}"
+    :xs="24"
+    :sm="24"
+    :md="24"
+    :lg="24"
+    :xl="24"
+    :xxl="24">
+    <a-form-model-item
+      :labelCol="layout === 'inline'?{span:2}:undefined"
+      :wrapperCol="layout === 'inline'?{span:22}:undefined"
+      :ref="attr.model"
+      :label="showLabel?attr.name:undefined"
+      :prop="attr.prop ? attr.prop : attr.model">
+      <upload
+        :files="files"
+        :images="images"
+        :model="attr"
+        :uploadStyle="attr.uploadStyle"
+        :service-name="serviceName"
+        @setFiles="setFiles"></upload>
+    </a-form-model-item>
+  </a-col>
+  <!-- 省市区选择框 -->
+  <x-form-col
+    v-else-if="attr.type === 'citySelect' && show"
+    :flex="attr.flex">
+    <a-form-model-item
+      :ref="attr.model"
+      :label="showLabel?attr.name:undefined"
+      :prop="attr.prop ? attr.prop : attr.model">
+      <citySelect
+        @change="attr.dataChangeFunc && debouncedDataChangeFunc()"
+        ref="citySelect"
+        v-model="form[attr.model]"
+        :contexts="attr.contexts"
+        :value-type="attr.valueType"
+        :default-value="form[attr.model]"></citySelect>
+    </a-form-model-item>
+  </x-form-col>
+  <!-- 地点搜索框 -->
+  <x-form-col
+    v-else-if="attr.type === 'addressSearch' && show"
+    :flex="attr.flex">
+    <a-form-model-item
+      :ref="attr.model"
+      :label="showLabel?attr.name:undefined"
+      :prop="attr.prop ? attr.prop : attr.model"
+      :labelCol="layout === 'inline' && attr.occupyCol ? labelAndWrapperCol[attr.occupyCol].labelCol:undefined"
+      :wrapperCol="layout === 'inline'&& attr.occupyCol ? labelAndWrapperCol[attr.occupyCol].wrapperCol:undefined"
+      :style="layout === 'inline'&& attr.occupyCol && attr.occupyCol > 1? {width:`calc(100% - ${attr.occupyCol * 1.533}rem)`}:{}">
+      <address-search-combobox
+        :emitFunc="emitFunc"
+        :attr="attr"
+        :read-only="readOnly"
+        v-model="searchResult"
+        :resultKeys="{ address: attr.model, coords: `${attr.model}_lng_lat` }"
+        ref="addressSearchCombobox"
+        searchResultType="Object"
+        @onSelect="addressSearchComboboxSelect"
+        @onDivisionsChange="onDivisionsChange"
+      ></address-search-combobox>
+    </a-form-model-item>
+  </x-form-col>
+  <!-- 富文本 -->
+  <x-form-col
+    v-else-if="attr.type === 'richText' && show"
+    :flex="attr.flex">
+    <a-form-model-item :ref="attr.model" :prop="attr.prop ? attr.prop : attr.model">
+      <RichTextModal ref="richTextModal" style="height: 500px"></RichTextModal>
+    </a-form-model-item>
+  </x-form-col>
+  <!-- 人员选择框 -->
+  <x-form-col
+    v-else-if="attr.type === 'personSetting' && show"
+    :flex="attr.flex">
+    <a-form-model-item
+      :ref="attr.model"
+      :label="showLabel?attr.name:undefined"
+      :prop="attr.prop ? attr.prop : attr.model">
+      <PersonSetting v-model="form[attr.model]"></PersonSetting>
+    </a-form-model-item>
+  </x-form-col>
+  <!-- 树形选择框 -->
+  <x-form-col
+    v-else-if="attr.type === 'treeSelect' && show"
+    :flex="attr.flex">
+    <x-tree-select
+      @onChange="attr.dataChangeFunc && debouncedDataChangeFunc()"
+      v-model="form[attr.model]"
+      :attr="attr"
+      ref="xTreeSelect">
+    </x-tree-select>
+  </x-form-col>
+  <!-- 评分框 -->
+  <x-form-col
+    v-else-if="attr.type === 'rate' && show"
+    :flex="attr.flex">
+    <a-form-model-item
+      :ref="attr.model"
+      :label="showLabel?attr.name:undefined"
+      :prop="attr.prop ? attr.prop : attr.model">
+      <a-rate
+        v-model="form[attr.model]"
+        @change="attr.dataChangeFunc && debouncedDataChangeFunc()"
+      />
+    </a-form-model-item>
+  </x-form-col>
+  <!--  区间选择器  -->
+  <x-form-col
+    v-else-if="attr.type === 'intervalPicker' && show"
+    :flex="attr.flex">
+    <a-form-model-item
+      :ref="attr.model"
+      :label="showLabel?attr.name:undefined"
+      :prop="attr.prop ? attr.prop : attr.model">
+      <a-input
+        v-if="mode === '新增/修改'"
+        v-model="form[attr.model]"
+        :whitespace="true"
+        :read-only="readOnly"
+        :disabled="disabled && !readOnly"
+        style="width:100%"
+        @blur="attr.inputOnBlurFunc && emitFunc(attr.inputOnBlurFunc,attr)"
+        :placeholder="attr.placeholder ? attr.placeholder : '请输入'+attr.name.replace(/\s*/g, '')"
+        :ref="`${attr.model}input`"/>
+      <a-input-group v-else compact>
+        <a-input
+          v-model="form[attr.model][0]"
+          class="intervalPicker-begin"
+          placeholder="起始值"/>
+        <a-input
+          class="intervalPicker-center"
+          style="backgroundColor: #fff"
+          placeholder="~"
+          disabled
+        />
+        <a-input
+          v-model="form[attr.model][1]"
+          class="intervalPicker-end"
+          placeholder="结束值"/>
+      </a-input-group>
+    </a-form-model-item>
+  </x-form-col>
+  <!--  车牌号选择  -->
+  <x-form-col
+    v-else-if="attr.type === 'licensePlate' && show"
+    :flex="attr.flex">
+    <a-form-model-item
+      :ref="attr.model"
+      :label="showLabel?attr.name:undefined"
+      :style="layout === 'inline'&& attr.occupyCol && attr.occupyCol > 1? {width:`calc(100% - ${attr.occupyCol * 1.533}rem)`}:{}"
+      :prop="attr.prop ? attr.prop : attr.model">
+      <!--  如果配置了后置按钮插槽    -->
+      <a-input
+        v-if="mode ==='查询'"
+        v-model="form[attr.model]"
+        :whitespace="true"
+        :read-only="readOnly"
+        :disabled="disabled && !readOnly"
+        style="width:100%"
+        @blur="attr.inputOnBlurFunc && emitFunc(attr.inputOnBlurFunc,attr)"
+        :placeholder="attr.placeholder ? attr.placeholder : '请输入'+attr.name.replace(/\s*/g, '')"
+        :ref="`${attr.model}input`"/>
+      <x-license-plate
+        v-else
+        v-model="form[attr.model]"
+        @change="attr.dataChangeFunc && debouncedDataChangeFunc()"
+      ></x-license-plate>
+    </a-form-model-item>
+  </x-form-col>
+</template>
+<script>
+
+import { debounce } from 'ant-design-vue/lib/vc-table/src/utils'
+import XFormCol from '@vue2-client/base-client/components/common/XFormCol'
+import XBadge from '@vue2-client/base-client/components/common/XBadge'
+import CitySelect from '@vue2-client/base-client/components/common/CitySelect'
+import PersonSetting from '@vue2-client/base-client/components/common/PersonSetting'
+import AddressSearchCombobox from '@vue2-client/base-client/components/common/AddressSearchCombobox'
+import Upload from '@vue2-client/base-client/components/common/Upload'
+import moment from 'moment'
+import { upload, getConfigByName, runLogic, getConfigByNameAsync } from '@vue2-client/services/api/common'
+import util, { uuid } from '.././../../../utils/util'
+import XTreeSelect from '@vue2-client/base-client/components/common/XForm/XTreeSelect'
+import { searchToListOption, searchToOption } from '@vue2-client/services/v3Api'
+import { mapState } from 'vuex'
+import { executeStrFunction } from '@vue2-client/utils/runEvalFunction'
+import RichTextModal from '../richTextModal/index.vue'
+import XLicensePlate from '@vue2-client/base-client/components/common/XLicensePlate/XLicensePlate.vue'
+
+export default {
+  name: 'XFormItem',
+  components: {
+    XLicensePlate,
+    XTreeSelect,
+    XFormCol,
+    XBadge,
+    CitySelect,
+    PersonSetting,
+    AddressSearchCombobox,
+    Upload,
+    RichTextModal
+  },
+  data () {
+    // 检索去抖
+    this.fetchFunction = debounce(this.fetchFunction, 800)
+    return {
+      option: [],
+      // 最后检索版本
+      lastFetchId: 0,
+      // 检索中
+      searching: false,
+      searchResult: '',
+      yearShowOne: false,
+      optionForFunc: [],
+      // 控制当前表单项是否展示
+      show: true,
+      labelAndWrapperCol: [{
+        labelCol: undefined,
+        wrapperCol: undefined
+      },
+        {
+          labelCol: undefined,
+          wrapperCol: undefined
+        },
+        {
+          labelCol: { span: 3 },
+          wrapperCol: { span: 21 }
+        },
+        {
+          labelCol: { span: 2 },
+          wrapperCol: { span: 22 }
+        }],
+      // moment
+      moment
+    }
+  },
+  props: {
+    attr: {
+      type: Object,
+      default:
+        () => {
+          return {}
+        }
+    },
+    form: {
+      type: Object,
+      required:
+        true
+    },
+    disabled: {
+      type: Boolean,
+      default:
+        () => {
+          return false
+        }
+    },
+    readOnly: {
+      type: Boolean,
+      default:
+        () => {
+          return false
+        }
+    },
+    mode: {
+      type: String,
+      default:
+        () => {
+          return '查询'
+        }
+    },
+    files: {
+      type: Array,
+      default:
+        () => {
+          return []
+        }
+    },
+    images: {
+      type: Array,
+      default:
+        () => {
+          return []
+        }
+    },
+    serviceName: {
+      type: String,
+      default:
+      undefined
+    },
+    // 调用logic获取数据源的追加参数
+    getDataParams: {
+      type: Object,
+      default:
+      undefined
+    },
+    // 布局
+    layout: {
+      type: String,
+      default:
+        'horizontal'
+    },
+    // 环境
+    env: {
+      type: String,
+      default:
+        () => {
+          return 'prod'
+        }
+    },
+    // 设置表单值
+    setForm: {
+      type: Function,
+      default: (val) => {
+        console.log(val)
+      }
+    },
+    showLabel: {
+      type: Boolean,
+      default:
+        () => {
+          return true
+        }
+    }
+  },
+  async created () {
+    this.init()
+    if (this.attr.keyName && (this.attr?.keyName?.toString().indexOf('async ') !== -1 || this.attr?.keyName?.toString()?.indexOf('function') !== -1)) {
+      this.debouncedUpdateOptions = debounce(this.updateOptions, 200)
+    }
+    if (this.attr.dataChangeFunc) {
+      this.debouncedDataChangeFunc = debounce(this.dataChangeFunc, 200)
+    }
+    if (this.attr.showFormItemFunc) {
+      this.debouncedShowFormItemFunc = debounce(this.showFormItemFunc, 100)
+      // 执行一次
+      debounce(this.showFormItemFunc, 100)()
+    }
+    if (this.attr.showQueryFormItemFunc) {
+      this.debouncedShowQueryFormItemFunc = debounce(this.showQueryFormItemFunc, 100)
+      // 执行一次
+      debounce(this.showQueryFormItemFunc, 100)()
+    }
+    // 人员联动框增加监听
+    if (this?.attr?.keyName?.toString()?.startsWith('search@根据表单项[') && this?.attr?.keyName?.toString().endsWith(']联动人员')) {
+      this.debouncedUserLinkFunc = debounce(() => this.updateResOptions('人员'), 200)
+    }
+    if (this?.attr?.keyName?.toString()?.startsWith('search@根据表单项[') && this?.attr?.keyName?.toString().endsWith(']联动部门')) {
+      this.debouncedDepLinkFunc = debounce(() => this.updateResOptions('部门'), 200)
+    }
+  },
+  computed: {
+    ...mapState('account', { currUser: 'user' })
+  },
+  watch: {
+    attr: {
+      handler () {
+        this.init()
+      },
+      deep: true
+    },
+    form: {
+      handler (newVal, oldVal) {
+        // 如果是从函数获取 options
+        if (this.attr.keyName && (this.attr.keyName.toString().indexOf('async ') !== -1 || this.attr.keyName.toString().indexOf('function') !== -1)) {
+          this.debouncedUpdateOptions()
+        }
+        // 如果有自定义是否展示表单项函数
+        if (this.attr.showFormItemFunc) {
+          this.debouncedShowFormItemFunc()
+        }
+        // 如果有自定义是否展示查询表单项函数
+        if (this.attr.showQueryFormItemFunc) {
+          this.debouncedShowQueryFormItemFunc()
+        }
+        // 地址搜索框赋值
+        if (this.attr.type === 'addressSearch') {
+          this.$refs.addressSearchCombobox.addressInput = this.form[this.attr.model]
+        }
+        // 数据源来自人员联动时更新数据
+        if (this?.attr?.keyName?.toString()?.startsWith('search@根据表单项[') && this?.attr?.keyName?.toString().endsWith(']联动人员')) {
+          this.debouncedUserLinkFunc()
+        }
+        // 数据源来自人员联动时更新数据
+        if (this?.attr?.keyName?.toString()?.startsWith('search@根据表单项[') && this?.attr?.keyName?.toString().endsWith(']联动部门')) {
+          this.debouncedDepLinkFunc()
+        }
+      },
+      deep: true
+    }
+  },
+  methods: {
+    focusInput () {
+      if (this.attr.defaultFocus) {
+        this.$nextTick(h => {
+          const el = this.$refs[`${this.attr.model}input`]?.$el
+          let inputEl
+          if (el) {
+            if (el.tagName.toLowerCase() === 'input') {
+              inputEl = el
+            } else {
+              inputEl = el.querySelector('input')
+            }
+          }
+          if (inputEl) {
+            inputEl.focus()
+            if (inputEl.type === 'number') {
+              if (inputEl.valueAsNumber) {
+                inputEl.setSelectionRange(0, inputEl.valueAsNumber.toString().length)
+              }
+            } else {
+              if (inputEl.value) {
+                inputEl.setSelectionRange(0, inputEl.value.length)
+              }
+            }
+          }
+        })
+      }
+    },
+    // 更新人员下拉框数据
+    async updateResOptions (type) {
+      if (this?.attr?.keyName?.toString()?.startsWith('search@根据表单项[') && this?.attr?.keyName?.toString()?.endsWith(`]联动${type}`)) {
+        const searchData = { source: `获取${type}`, userid: this.currUser.id }
+        const startIndex = this.attr.keyName.indexOf('[') + 1
+        const endIndex = this.attr.keyName.indexOf(']', startIndex)
+        const fromModel = this.attr.keyName.substring(startIndex, endIndex).replace('.', '_')
+        const formModelData = this.form[fromModel]
+        if (fromModel?.length && formModelData?.length) {
+          await searchToListOption(searchData, res => {
+            this.getDataCallback(
+              res.filter(h => {
+                  if (fromModel.indexOf('org') > -1) {
+                    return formModelData?.includes(h.orgid || h.f_organization_id || h.parentid)
+                  } else {
+                    return formModelData?.includes(h?.parentid)
+                  }
+                }
+              )
+            )
+          })
+        }
+      }
+    },
+    // js 函数作为数据源
+    async updateOptions () {
+      if (this.attr.keyName && (this.attr.keyName.indexOf('async ') !== -1 || this.attr.keyName.indexOf('function ') !== -1)) {
+        this.optionForFunc = await executeStrFunction(this.attr.keyName, [this.form, runLogic, this.mode, getConfigByNameAsync])
+      }
+    },
+    async dataChangeFunc () {
+      if (this.attr.dataChangeFunc) {
+        await executeStrFunction(this.attr.dataChangeFunc, [this.form, this.setForm, this.attr, util, this.mode, runLogic, getConfigByNameAsync])
+      }
+    },
+    async showFormItemFunc () {
+      if (this.attr.showFormItemFunc) {
+        const obj = executeStrFunction(this.attr.showFormItemFunc, [this.form, this.setForm, this.attr, util, this.mode])
+        // 判断是 bool 还是  obj  兼容
+        if (typeof obj === 'boolean') {
+          this.show = obj
+        } else if (obj && typeof obj === 'object') {
+          // obj 是一个对象，并且不是数组
+          this.show = obj?.show
+          this.readOnly = obj?.readOnly
+        }
+      } else {
+        this.show = true
+      }
+    },
+    async showQueryFormItemFunc () {
+      if (this.attr.showQueryFormItemFunc) {
+        const obj = executeStrFunction(this.attr.showQueryFormItemFunc, [this.form, this.setForm, this.attr, util, this.mode])
+        // 判断是 bool 还是  obj  兼容
+        if (typeof obj === 'boolean') {
+          this.show = obj
+        } else if (obj && typeof obj === 'object') {
+          // obj 是一个对象，并且不是数组
+          this.show = obj?.show
+          this.readOnly = obj?.readOnly
+        }
+      } else {
+        this.show = true
+      }
+    },
+    init () {
+      if (this.mode === '新增/修改' && !this.attr.flex) {
+        if (['horizontal', 'vertical'].includes(this.layout)) {
+          // 新增修改表单 horizontal 模式下默认为一行
+          this.attr.flex = {
+            xs: 24,
+            sm: 24,
+            md: 24,
+            lg: 24,
+            xl: 24,
+            xxl: 24
+          }
+        } else {
+          if (['input', 'addressSearch'] && this.attr.occupyCol) {
+            // 如果是 input 看是否配置了 占用列配置
+            this.attr.flex = {
+              xs: 8 * this.attr.occupyCol,
+              sm: 8 * this.attr.occupyCol,
+              md: 8 * this.attr.occupyCol,
+              lg: 8 * this.attr.occupyCol,
+              xl: 8 * this.attr.occupyCol,
+              xxl: 8 * this.attr.occupyCol
+            }
+          } else {
+            // 新增修改表单 vertical 模式下默认为1列
+            this.attr.flex = {
+              xs: 24,
+              sm: 24,
+              md: 24,
+              lg: 12,
+              xl: 8,
+              xxl: 8
+            }
+          }
+        }
+      } else {
+        this.attr.flex = {
+          xs: 24,
+          sm: 24,
+          md: 24,
+          lg: 8,
+          xl: 6,
+          xxl: 6
+        }
+      }
+      if (this.attr.type === 'richText') {
+        this.initRichText()
+      } else if (this.attr.keyName && typeof this.attr.keyName === 'string') {
+        if (this.attr.keyName.indexOf('logic@') !== -1) {
+          this.getData({}, res => this.getDataCallback(res))
+        } else if (this.attr.keyName.indexOf('search@') !== -1) {
+          // `tool.getFullTree(this.getRights().where(row.getType()==$organization$))`
+          // 判断是否根据角色查询
+          let source = this.attr.keyName.substring(7)
+          const userid = this.currUser.id
+          let roleName = 'roleName'
+          if (source.startsWith('根据角色[') && source.endsWith(']获取人员')) {
+            const startIndex = source.indexOf('[') + 1
+            const endIndex = source.indexOf(']', startIndex)
+            roleName = source.substring(startIndex, endIndex)
+            source = '根据角色获取人员'
+          }
+          const searchData = { source, userid, roleName }
+          // 判断是否根据某个表单项联动 仅返回列表结构并筛选
+          if (source.startsWith('根据表单项[') && source.endsWith(']联动人员')) {
+            this.updateResOptions('人员')
+          } else if (source.startsWith('根据表单项[') && source.endsWith(']联动部门')) {
+            this.updateResOptions('部门')
+          } else if (this.attr.type === 'select' || this.attr.type === 'checkbox') {
+            // 仅获取最内层数据
+            searchToListOption(searchData, res => this.getDataCallback(res))
+          } else {
+            // 其他资源通用逻辑
+            searchToOption(searchData, res => this.getDataCallback(res))
+          }
+        } else if (this.attr.keyName.indexOf('config@') !== -1) {
+          const configName = this.attr.keyName.substring(7)
+          getConfigByName(configName, this.serviceName, res => {
+            this.getDataCallback(res.value)
+          }, this.env === 'dev')
+        } else if (this.attr.keyName.indexOf('async ') !== -1 || this.attr.keyName.indexOf('function ') !== -1) {
+          this.updateOptions()
+        }
+      }
+      this.focusInput()
+    },
+    addressSearchComboboxSelect (data) {
+      this.form = Object.assign(this.form, JSON.parse(data))
+    },
+    onDivisionsChange (data) {
+      this.emitFunc('addressSearchComboboxSelect', {
+        key: this.attr.model,
+        value: data
+      })
+    },
+    getDataCallback (res) {
+      this.option = res
+      if (this.attr.type === 'treeSelect') {
+        this.$refs.xTreeSelect.init({
+          option: this.option,
+          form: this.form,
+          queryType: this.attr.queryType,
+          name: this.attr.name,
+          model: this.attr.model,
+          mode: this.mode,
+          disabled: this.disabled
+        })
+      } else if (this.attr.type === 'radio') {
+        this.initRadioValue()
+      }
+    },
+    initRadioValue () {
+      const model = this.attr.model
+      if (this.mode === '新增/修改' && this.attr.type === 'radio' && (this.form[model] === undefined || this.form[model] === null) && !this.attr.prop) {
+        if (this.attr.keys && this.attr.keys.length > 1) {
+          this.form[model] = this.attr.keys[0].value
+        } else if (this.option.length > 1) {
+          this.form[model] = this.option[0].value
+        }
+      }
+    },
+    async initRichText () {
+      const logicName = this.attr.keyName
+      if (logicName) {
+        this.getData({}, async res => {
+          try {
+            const response = await fetch(res.url) // 等待 fetch 完成
+            if (response.ok) {
+              const data = await response.text() // 等待解析为文本内容
+              const richText = JSON.parse(data)
+              this.$refs.richTextModal.init({
+                richText: richText
+              })
+            } else {
+              this.$message.error('富文本读取失败，请求结果：' + response.statusText)
+            }
+          } catch (error) {
+            this.$message.error('富文本读取失败，请求结果：' + error)
+          }
+        })
+      }
+    },
+    async getRichValue () {
+      if (this.$refs.richTextModal) {
+        const richText = this.$refs.richTextModal.getValue()
+        console.log('>>>> richText: ', richText)
+        const fileContent = JSON.stringify(richText)
+        const fileName = uuid() + '.txt'
+        // 创建一个 Blob 对象，类型为 text/plain
+        const blob = new Blob([fileContent], { type: 'text/plain' })
+        // 创建一个 File 对象（可选，但有助于保持一致性，因为 File 继承自 Blob）
+        const file = new File([blob], fileName, { type: blob.type })
+        // 组装上传数据
+        const headers = {
+          'Content-Type': 'multipart/form-data',
+        }
+        const formData = new FormData()
+        formData.append('avatar', file)
+        formData.append('resUploadMode', 'server')
+        formData.append('pathKey', 'Default')
+        formData.append('formType', 'file')
+        formData.append('useType', 'Default')
+        formData.append('filename', fileName)
+        formData.append('filesize', (blob.size / 1024 / 1024).toFixed(4))
+        formData.append('f_operator', this.currUser ? this.currUser.username : '')
+
+        // 上传文件
+        await upload(formData, this.serviceName, { headers, timeout: 600 * 1000 }, this.env === 'dev').then(res => {
+          this.form[this.attr.model] = res.data.id
+          this.form.t_f_path = res.data.f_downloadpath
+        }).catch(error => {
+          // 处理上传错误
+          console.error(error)
+        })
+      }
+    },
+    openChangeOne (status) {
+      if (status) {
+        this.yearShowOne = true
+      }
+    },
+    // 得到年份选择器的值
+    panelChangeOne (value) {
+      this.yearShowOne = false
+      this.form[this.attr.model] = value.format('YYYY')
+    },
+    // 文件框时设置上传组件的值
+    setFiles (fileIds) {
+      if (!this.form[this.attr.model]) {
+        this.form[this.attr.model] = []
+      }
+      this.form[this.attr.model] = [...fileIds]
+    },
+    // 懒加载检索方法
+    fetchFunction (value) {
+      this.lastFetchId += 1
+      const fetchId = this.lastFetchId
+      this.option = []
+      this.searching = true
+      this.getData({
+        word: value
+      }, res => {
+        if (fetchId !== this.lastFetchId) {
+          return
+        }
+        this.option = res
+        this.searching = false
+      })
+    },
+    // 获取数据
+    getData (value, callbackFun) {
+      if (value !== '') {
+        const logicName = this.attr.keyName
+        const logic = logicName.substring(6)
+        // 调用logic前设置参数
+        if (this.getDataParams && this.getDataParams[this.attr.model]) {
+          Object.assign(value, this.getDataParams[this.attr.model])
+        }
+        runLogic(logic, Object.assign(value, {
+          orgId: this.currUser.orgid,
+          userId: this.currUser.id
+        }), this.serviceName, this.env === 'dev').then(res => {
+          callbackFun(res)
+        }).catch(e => {
+          callbackFun([])
+          console.error('获取数据失败：' + e)
+        })
+      }
+    },
+    filterOption (input, option) {
+      const child = option.componentOptions.children[0]
+      if (child.text) {
+        return child.text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      } else if (child.elm.innerText) {
+        return child.elm.innerText.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      } else {
+        return child.child.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      }
+    },
+    emitFunc (func, data) {
+      this.$emit('x-form-item-emit-func', func, data)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.intervalPicker-begin {
+  width: calc(50% - 14px);
+}
+
+.intervalPicker-center {
+  width: 30px;
+  border-left: 0;
+  pointer-events: none;
+}
+
+.intervalPicker-end {
+  width: calc(50% - 14px);
+  border-left: 0;
+}
+</style>