vue2-client 1.6.27 → 1.6.28

package/CHANGELOG.md

@@ -1,6 +1,10 @@
 # Change Log
 > 所有关于本项目的变化都在该文档里。
 
+**1.6.28 -2023-04-19 @江超**
+- 修复下拉框搜索异常问题
+- 依赖更新
+
 **1.6.26 - 1.6.27 -2023-04-16 @江超**
 - 修复单页面iframe对http前缀的兼容处理
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-client",
-  "version": "1.6.27",
+  "version": "1.6.28",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -12,10 +12,10 @@
   },
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
-    "@antv/g2plot": "^2.4.25",
+    "@antv/g2plot": "^2.4.29",
     "lodash.get": "^4.4.2",
-    "js-base64": "^3.7.2",
-    "jsencrypt": "^3.2.1",
+    "js-base64": "^3.7.5",
+    "jsencrypt": "^3.3.2",
     "vue-json-viewer": "^2.2.22",
     "xlsx": "0.18.5",
     "file-saver": "^2.0.5",
@@ -25,37 +25,37 @@
     "ant-design-vue": "^1.7.8",
     "axios": "^0.27.2",
     "clipboard": "^2.0.11",
-    "core-js": "^3.23.5",
-    "date-fns": "^2.28.0",
+    "core-js": "^3.30.1",
+    "date-fns": "^2.29.3",
     "default-passive-events": "^2.0.0",
     "enquire.js": "^2.1.6",
-    "highlight.js": "^10.7.3",
+    "highlight.js": "^11.7.0",
     "js-cookie": "^2.2.1",
     "mockjs": "^1.1.0",
     "nprogress": "^0.2.0",
     "viser-vue": "^2.4.8",
     "vue": "2.6.14",
-    "vue-i18n": "^8.27.2",
-    "vue-router": "^3.5.4",
+    "vue-i18n": "^8.28.2",
+    "vue-router": "^3.6.5",
     "vuedraggable": "^2.24.3",
     "vuex": "^3.6.2",
-    "vue-video-player": "5.0.2",
-    "videojs-contrib-hls": "5.14.1"
+    "vue-video-player": "^5.0.2",
+    "videojs-contrib-hls": "^5.15.0"
   },
   "devDependencies": {
     "script-loader": "^0.7.2",
-    "@ant-design/colors": "^6.0.0",
-    "@babel/core": "^7.18.10",
+    "@ant-design/colors": "^7.0.0",
+    "@babel/core": "^7.21.4",
     "@vue/cli-plugin-babel": "^4.5.19",
     "@vue/cli-plugin-eslint": "^4.5.19",
     "@vue/cli-service": "^4.5.19",
     "@vue/eslint-config-standard": "^4.0.0",
-    "@vuepress/plugin-back-to-top": "^1.9.7",
+    "@vuepress/plugin-back-to-top": "^1.9.9",
     "babel-eslint": "^10.1.0",
     "babel-plugin-transform-remove-console": "^6.9.4",
     "babel-polyfill": "^6.26.0",
     "compression-webpack-plugin": "^4.0.1",
-    "deepmerge": "^4.2.2",
+    "deepmerge": "^4.3.1",
     "eslint": "^6.8.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-node": "^11.1.0",
@@ -67,9 +67,9 @@
     "style-resources-loader": "^1.5.0",
     "vue-cli-plugin-style-resources-loader": "^0.1.5",
     "vue-template-compiler": "2.6.14",
-    "vuepress": "^1.9.7",
+    "vuepress": "^1.9.9",
     "webpack": "^4.46.0",
-    "webpack-theme-color-replacer": "1.4.1",
+    "webpack-theme-color-replacer": "^1.4.7",
     "whatwg-fetch": "^3.6.2"
   },
   "browserslist": [

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

@@ -1,592 +1,591 @@
-<template>
-  <!-- 输入框 -->
-  <x-form-col
-    v-if="attr.type === 'input'"
-    :xl="xl"
-    :xxl="xxl">
-    <a-form-model-item
-      :ref="attr.model"
-      :label="attr.name"
-      :prop="attr.model">
-      <a-input v-model="form[attr.model]" :disabled="disabled" :placeholder="attr.placeholder ? attr.placeholder : '请输入'+attr.name.replace(/\s*/g, '')"/>
-    </a-form-model-item>
-  </x-form-col>
-  <!-- 下拉框 -->
-  <x-form-col
-    v-else-if="attr.type === 'select'"
-    :xl="xl"
-    :xxl="xxl">
-    <a-form-model-item
-      :ref="attr.model"
-      :label="attr.name"
-      :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 : '请选择'"
-        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="item.value">
-            {{ item.label }}
-          </a-select-option>
-        </template>
-        <template v-else>
-          <template v-if="attr.keyName.indexOf('logic@') !== -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">
-              <!-- 徽标(badge) -->
-              <x-badge :badge-key="attr.keyName" :replaceText="item.text" :value="item.value"/>
-            </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"
-        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'"
-    :xl="xl"
-    :xxl="xxl">
-    <a-form-model-item
-      :ref="attr.model"
-      :label="attr.name"
-      :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 : '请选择'"
-        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">
-            <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"
-        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>
-  <!-- TODO 单选框 -->
-  <!-- 日期范围选择器 -->
-  <x-form-col
-    v-else-if="attr.type === 'rangePicker'"
-    :xl="xl"
-    :xxl="xxl">
-    <a-form-model-item :ref="attr.model" :label="attr.name" :prop="attr.model">
-      <a-range-picker v-model="form[attr.model]" :disabled="disabled" :show-time="true" valueFormat="YYYY-MM-DD HH:mm:ss"/>
-    </a-form-model-item>
-  </x-form-col>
-  <!-- 月份选择器 -->
-  <x-form-col
-    v-else-if="attr.type === 'monthPicker'"
-    :xl="xl"
-    :xxl="xxl">
-    <a-form-model-item :ref="attr.model" :label="attr.name" :prop="attr.model">
-      <a-month-picker v-model="form[attr.model]" :disabled="disabled" :show-time="true" valueFormat="YYYY-MM"/>
-    </a-form-model-item>
-  </x-form-col>
-  <!-- 年份选择器 -->
-  <x-form-col
-    v-else-if="attr.type === 'yearPicker'"
-    :xl="xl"
-    :xxl="xxl">
-    <a-form-model-item :ref="attr.model" :label="attr.name" :prop="attr.model">
-      <a-date-picker
-        v-model="form[attr.model]"
-        :disabled="disabled"
-        format="YYYY"
-        mode="year"
-        v-decorator="['year']"
-        placeholder="请输入年份"
-        :open="yearShowOne"
-        @openChange="openChangeOne"
-        @panelChange="panelChangeOne"/>
-    </a-form-model-item>
-  </x-form-col>
-  <!-- 日期选择器 -->
-  <x-form-col
-    v-else-if="attr.type === 'datePicker'"
-    :xl="xl"
-    :xxl="xxl">
-    <a-form-model-item :ref="attr.model" :label="attr.name" :prop="attr.model">
-      <a-range-picker
-        v-if="mode === '查询'"
-        v-model="form[attr.model]"
-        :disabled="disabled"
-        :show-time="{ defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')] }"
-        format="YYYY-MM-DD"
-        valueFormat="YYYY-MM-DD HH:mm:ss" />
-      <a-date-picker v-else v-model="form[attr.model]" :disabled="disabled" :show-time="{ defaultValue: moment('00:00:00', 'HH:mm:ss') }" valueFormat="YYYY-MM-DD HH:mm:ss"/>
-    </a-form-model-item>
-  </x-form-col>
-  <!-- 文本域 -->
-  <x-form-col
-    v-else-if="attr.type === 'textarea'"
-    :lg="24"
-    :md="24"
-    :sm="24"
-    :xl="24"
-    :xs="24"
-    :xxl="24">
-    <a-form-model-item
-      :ref="attr.model"
-      :label="attr.name"
-      :prop="attr.model">
-      <a-textarea v-model="form[attr.model]" :disabled="disabled" :placeholder="attr.placeholder ? attr.placeholder : '请输入'+attr.name.replace(/\s*/g, '')" :rows="4"/>
-    </a-form-model-item>
-  </x-form-col>
-  <!-- 文件上传 -->
-  <x-form-col
-    v-else-if="attr.type === 'file' || attr.type === 'image'"
-    :lg="24"
-    :md="24"
-    :sm="24"
-    :xl="24"
-    :xs="24"
-    :xxl="24">
-    <a-form-model-item :ref="attr.model" :label="attr.name" :prop="attr.model">
-      <upload :files="files" :images="images" :model="attr" :service-name="serviceName" @setFiles="setFiles"></upload>
-    </a-form-model-item>
-  </x-form-col>
-  <!-- 省市区选择框 -->
-  <x-form-col
-    v-else-if="attr.type === 'citySelect'"
-    :xl="xl"
-    :xxl="xxl">
-    <a-form-model-item :ref="attr.model" :label="attr.name" :prop="attr.model">
-      <citySelect v-model="form[attr.model]" ></citySelect>
-    </a-form-model-item>
-  </x-form-col>
-  <!-- 地点搜索框 -->
-  <x-form-col
-    v-else-if="attr.type === 'addressSearch'"
-    :xl="xl"
-    :xxl="xxl">
-    <a-form-model-item :ref="attr.model" :label="attr.name" :prop="attr.model">
-      <address-search-combobox
-        v-model="searchResult"
-        :resultKeys="{ address: attr.model, coords: `${attr.model}_lng_lat` }"
-        searchResultType="Object"
-        @onSelect="form=Object.assign(form,JSON.parse(searchResult))"
-      ></address-search-combobox>
-    </a-form-model-item>
-  </x-form-col>
-  <!-- 人员选择框 -->
-  <x-form-col
-    v-else-if="attr.type === 'personSetting'"
-    :xl="xl"
-    :xxl="xxl">
-    <a-form-model-item :ref="attr.model" :label="attr.name" :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'"
-    :xl="xl"
-    :xxl="xxl">
-    <a-form-model-item :ref="attr.model" :label="attr.name" :prop="attr.model">
-      <a-tree-select
-        v-model="treeSelectValue"
-        :disabled="disabled"
-        :tree-data="getTreeData()"
-        :tree-checkable="mode === '查询' && attr.queryType !== 'RIGHT_LIKE'"
-        :placeholder="'请选择' + attr.name"
-        :dropdown-style="{ maxHeight: '400px' }"
-        tree-node-filter-prop="label"
-        :show-checked-strategy="attr.queryType === 'RIGHT_LIKE' ? 'SHOW_ALL' : undefined"
-        allow-clear
-        class="tree-select"
-        @change="onTreeSelectChange">
-      </a-tree-select>
-    </a-form-model-item>
-  </x-form-col>
-</template>
-<script>
-
-import { post } from '@vue2-client/services/api'
-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'
-
-export default {
-  name: 'XFormItem',
-  components: {
-    XFormCol,
-    XBadge,
-    CitySelect,
-    PersonSetting,
-    AddressSearchCombobox,
-    Upload
-  },
-  data () {
-    // 检索去抖
-    this.fetchFunction = debounce(this.fetchFunction, 800)
-    return {
-      option: [],
-      // 最后检索版本
-      lastFetchId: 0,
-      // 检索中
-      searching: false,
-      searchResult: '',
-      yearShowOne: false,
-      // moment
-      moment,
-      // 树形选择框选中值
-      treeSelectValue: undefined
-    }
-  },
-  props: {
-    attr: {
-      type: Object,
-      default: () => {
-        return {}
-      }
-    },
-    form: {
-      type: Object,
-      required: true
-    },
-    disabled: {
-      type: Boolean,
-      default: () => {
-        return false
-      }
-    },
-    mode: {
-      type: String,
-      default: () => {
-        return '查询'
-      }
-    },
-    xl: {
-      type: Number,
-      default: undefined
-    },
-    xxl: {
-      type: Number,
-      default: undefined
-    },
-    files: {
-      type: Array,
-      default: () => {
-        return []
-      }
-    },
-    images: {
-      type: Array,
-      default: () => {
-        return []
-      }
-    },
-    serviceName: {
-      type: String,
-      default: 'af-system'
-    },
-    // 调用logic获取数据源的追加参数
-    getDataParams: {
-      type: Object,
-      default: undefined
-    }
-  },
-  created () {
-    this.init()
-  },
-  watch: {
-    attr: {
-      handler (newVal) {
-        this.init()
-      },
-      deep: true
-    },
-    form: {
-      handler (newVal) {
-        const value = newVal[this.attr.model]
-        const isEmpty = !value || !value.toString()
-        // 查询表单点击重置按钮时清空树形选择框选中状态
-        if (this.attr.type === 'treeSelect' && isEmpty) {
-          this.treeSelectValue = undefined
-        }
-      },
-      deep: true
-    }
-  },
-  methods: {
-    init () {
-      if (this.attr.keyName && this.attr.keyName.indexOf('logic@') !== -1) {
-        this.getData({}, res => {
-          this.option = res
-          // 修改时恢复树形选择框选中状态
-          if (this.attr.type === 'treeSelect' && this.attr.queryType !== 'RIGHT_LIKE') {
-            const value = this.form[this.attr.model]
-            if (value) {
-              // 如果数据源中值含'-'，代表是由多个数据源组成的树，需要重新组织新增/编辑时的表单值
-              if (this.option.length > 0 && this.option[0].value.indexOf('-') !== -1) {
-                this.treeSelectValue = this.attr.model + '-' + value
-              } else {
-                this.treeSelectValue = value
-              }
-            } else {
-              this.treeSelectValue = undefined
-            }
-          }
-        })
-      }
-    },
-    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, callback) {
-      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])
-        }
-        post('/api/' + this.serviceName + '/logic/' + logic, value).then(res => {
-          callback(res)
-        })
-      }
-    },
-    filterOption (input, option) {
-      if (option.componentOptions.children[0].text) {
-        return (
-          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
-        )
-      } else {
-        return (
-          option.componentOptions.children[0].child.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
-        )
-      }
-    },
-    // 获取树形选择框数据
-    getTreeData () {
-      let treeData = this.attr.keys
-      if (!treeData) {
-        treeData = this.option
-      }
-      if (this.mode === '新增/修改') {
-        this.setParentSelectable(treeData)
-      }
-      return treeData
-    },
-    // 设置树形选择框不能选择父节点
-    setParentSelectable (treeData) {
-      treeData.forEach(item => {
-        if (item.children && item.children.length) {
-          item.selectable = false
-          this.setParentSelectable(item.children)
-        }
-      })
-    },
-    // 选中树节点
-    onTreeSelectChange (value, label, extra) {
-      if (this.attr.queryType === 'RIGHT_LIKE') {
-        // 获取可用于模糊查询的组织机构字符串
-        let node = extra.triggerNode.$parent
-        label = label[0]
-        while (node && node.label) {
-          label = node.label + '.' + label
-          node = node.$parent
-        }
-        this.form[this.attr.model] = label
-      } else {
-        // 如果选中值含'-'，代表是由多个数据源组成的树，需要重新组织查询或新增/编辑时的表单
-        if ((value instanceof Array && value.length > 0 && value[0].indexOf('-') !== -1) || (typeof value === 'string' && value.indexOf('-') !== -1)) {
-          const treeDatas = {}
-          // 单选情况用于新增.修改表单场景，使用extra.triggerNode获取选中节点信息
-          if (!extra.allCheckedNodes) {
-            this.setNodeData(treeDatas, extra.triggerNode)
-          } else {
-            // 多选情况用于查询表单场景，使用extra.allCheckedNodes获取选中节点集合
-            const nodes = extra.allCheckedNodes
-            // 获取任意选中节点的叶子节点的字段名，用于查询时组织查询项的key
-            const name = this.getNodeDataProps(nodes[0])
-            // 获取所有选中节点的叶子节点的value,用于查询时组织查询项的value
-            const values = []
-            for (const node of nodes) {
-              const ref = this.setDataRef(node)
-              if (ref instanceof Array) {
-                for (const nodeRef of ref) {
-                  const keyValue = nodeRef.node.key
-                  values.push(keyValue.substring(keyValue.lastIndexOf('-') + 1))
-                }
-              } else {
-                const keyValue = ref.node.key
-                values.push(keyValue.substring(keyValue.lastIndexOf('-') + 1))
-              }
-            }
-            treeDatas[name] = values
-          }
-          // 移除默认的表单项，将组织好后的表单项合并进表单
-          this.form[this.attr.model] = undefined
-          Object.assign(this.form, treeDatas)
-        } else {
-          // 从单一数据源组成的树可以直接赋值
-          this.form[this.attr.model] = value
-        }
-      }
-    },
-    setDataRef (node) {
-      if (node.children) {
-        return this.setDataRef(node.children)
-      }
-      return node
-    },
-    /**
-     * 组织节点和每层父节点的数据，用于新增/修改时更新表单数据
-     * @param data 组织完成的数据
-     * @param node 节点
-     * @return 返回示例： { parentId: 1, childId: 2 }
-     */
-    setNodeData (data, node) {
-      if (node.value) {
-        const value = node.value
-        const columnsName = value.substring(0, value.indexOf('-'))
-        data[columnsName] = value.substring(value.lastIndexOf('-') + 1)
-        if (node.$parent) {
-          this.setNodeData(data, node.$parent)
-        }
-      }
-    },
-    getNodeDataProps (node) {
-      if (node.children && node.children.length > 0) {
-        return this.getNodeDataProps(node.children[0])
-      }
-      const value = node.node.key
-      return value.substring(0, value.indexOf('-'))
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.tree-select {
-  /deep/ .ant-select-selection.ant-select-selection--multiple {
-    max-height: 32px;
-    overflow-y: auto;
-  }
-}
-</style>
+<template>
+  <!-- 输入框 -->
+  <x-form-col
+    v-if="attr.type === 'input'"
+    :xl="xl"
+    :xxl="xxl">
+    <a-form-model-item
+      :ref="attr.model"
+      :label="attr.name"
+      :prop="attr.model">
+      <a-input v-model="form[attr.model]" :disabled="disabled" :placeholder="attr.placeholder ? attr.placeholder : '请输入'+attr.name.replace(/\s*/g, '')"/>
+    </a-form-model-item>
+  </x-form-col>
+  <!-- 下拉框 -->
+  <x-form-col
+    v-else-if="attr.type === 'select'"
+    :xl="xl"
+    :xxl="xxl">
+    <a-form-model-item
+      :ref="attr.model"
+      :label="attr.name"
+      :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 : '请选择'"
+        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="item.value">
+            {{ item.label }}
+          </a-select-option>
+        </template>
+        <template v-else>
+          <template v-if="attr.keyName.indexOf('logic@') !== -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">
+              <!-- 徽标(badge) -->
+              <x-badge :badge-key="attr.keyName" :replaceText="item.text" :value="item.value"/>
+            </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"
+        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'"
+    :xl="xl"
+    :xxl="xxl">
+    <a-form-model-item
+      :ref="attr.model"
+      :label="attr.name"
+      :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 : '请选择'"
+        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">
+            <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"
+        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>
+  <!-- TODO 单选框 -->
+  <!-- 日期范围选择器 -->
+  <x-form-col
+    v-else-if="attr.type === 'rangePicker'"
+    :xl="xl"
+    :xxl="xxl">
+    <a-form-model-item :ref="attr.model" :label="attr.name" :prop="attr.model">
+      <a-range-picker v-model="form[attr.model]" :disabled="disabled" :show-time="true" valueFormat="YYYY-MM-DD HH:mm:ss"/>
+    </a-form-model-item>
+  </x-form-col>
+  <!-- 月份选择器 -->
+  <x-form-col
+    v-else-if="attr.type === 'monthPicker'"
+    :xl="xl"
+    :xxl="xxl">
+    <a-form-model-item :ref="attr.model" :label="attr.name" :prop="attr.model">
+      <a-month-picker v-model="form[attr.model]" :disabled="disabled" :show-time="true" valueFormat="YYYY-MM"/>
+    </a-form-model-item>
+  </x-form-col>
+  <!-- 年份选择器 -->
+  <x-form-col
+    v-else-if="attr.type === 'yearPicker'"
+    :xl="xl"
+    :xxl="xxl">
+    <a-form-model-item :ref="attr.model" :label="attr.name" :prop="attr.model">
+      <a-date-picker
+        v-model="form[attr.model]"
+        :disabled="disabled"
+        format="YYYY"
+        mode="year"
+        v-decorator="['year']"
+        placeholder="请输入年份"
+        :open="yearShowOne"
+        @openChange="openChangeOne"
+        @panelChange="panelChangeOne"/>
+    </a-form-model-item>
+  </x-form-col>
+  <!-- 日期选择器 -->
+  <x-form-col
+    v-else-if="attr.type === 'datePicker'"
+    :xl="xl"
+    :xxl="xxl">
+    <a-form-model-item :ref="attr.model" :label="attr.name" :prop="attr.model">
+      <a-range-picker
+        v-if="mode === '查询'"
+        v-model="form[attr.model]"
+        :disabled="disabled"
+        :show-time="{ defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')] }"
+        format="YYYY-MM-DD"
+        valueFormat="YYYY-MM-DD HH:mm:ss" />
+      <a-date-picker v-else v-model="form[attr.model]" :disabled="disabled" :show-time="{ defaultValue: moment('00:00:00', 'HH:mm:ss') }" valueFormat="YYYY-MM-DD HH:mm:ss"/>
+    </a-form-model-item>
+  </x-form-col>
+  <!-- 文本域 -->
+  <x-form-col
+    v-else-if="attr.type === 'textarea'"
+    :lg="24"
+    :md="24"
+    :sm="24"
+    :xl="24"
+    :xs="24"
+    :xxl="24">
+    <a-form-model-item
+      :ref="attr.model"
+      :label="attr.name"
+      :prop="attr.model">
+      <a-textarea v-model="form[attr.model]" :disabled="disabled" :placeholder="attr.placeholder ? attr.placeholder : '请输入'+attr.name.replace(/\s*/g, '')" :rows="4"/>
+    </a-form-model-item>
+  </x-form-col>
+  <!-- 文件上传 -->
+  <x-form-col
+    v-else-if="attr.type === 'file' || attr.type === 'image'"
+    :lg="24"
+    :md="24"
+    :sm="24"
+    :xl="24"
+    :xs="24"
+    :xxl="24">
+    <a-form-model-item :ref="attr.model" :label="attr.name" :prop="attr.model">
+      <upload :files="files" :images="images" :model="attr" :service-name="serviceName" @setFiles="setFiles"></upload>
+    </a-form-model-item>
+  </x-form-col>
+  <!-- 省市区选择框 -->
+  <x-form-col
+    v-else-if="attr.type === 'citySelect'"
+    :xl="xl"
+    :xxl="xxl">
+    <a-form-model-item :ref="attr.model" :label="attr.name" :prop="attr.model">
+      <citySelect v-model="form[attr.model]" ></citySelect>
+    </a-form-model-item>
+  </x-form-col>
+  <!-- 地点搜索框 -->
+  <x-form-col
+    v-else-if="attr.type === 'addressSearch'"
+    :xl="xl"
+    :xxl="xxl">
+    <a-form-model-item :ref="attr.model" :label="attr.name" :prop="attr.model">
+      <address-search-combobox
+        v-model="searchResult"
+        :resultKeys="{ address: attr.model, coords: `${attr.model}_lng_lat` }"
+        searchResultType="Object"
+        @onSelect="form=Object.assign(form,JSON.parse(searchResult))"
+      ></address-search-combobox>
+    </a-form-model-item>
+  </x-form-col>
+  <!-- 人员选择框 -->
+  <x-form-col
+    v-else-if="attr.type === 'personSetting'"
+    :xl="xl"
+    :xxl="xxl">
+    <a-form-model-item :ref="attr.model" :label="attr.name" :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'"
+    :xl="xl"
+    :xxl="xxl">
+    <a-form-model-item :ref="attr.model" :label="attr.name" :prop="attr.model">
+      <a-tree-select
+        v-model="treeSelectValue"
+        :disabled="disabled"
+        :tree-data="getTreeData()"
+        :tree-checkable="mode === '查询' && attr.queryType !== 'RIGHT_LIKE'"
+        :placeholder="'请选择' + attr.name"
+        :dropdown-style="{ maxHeight: '400px' }"
+        tree-node-filter-prop="label"
+        :show-checked-strategy="attr.queryType === 'RIGHT_LIKE' ? 'SHOW_ALL' : undefined"
+        allow-clear
+        class="tree-select"
+        @change="onTreeSelectChange">
+      </a-tree-select>
+    </a-form-model-item>
+  </x-form-col>
+</template>
+<script>
+
+import { post } from '@vue2-client/services/api'
+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'
+
+export default {
+  name: 'XFormItem',
+  components: {
+    XFormCol,
+    XBadge,
+    CitySelect,
+    PersonSetting,
+    AddressSearchCombobox,
+    Upload
+  },
+  data () {
+    // 检索去抖
+    this.fetchFunction = debounce(this.fetchFunction, 800)
+    return {
+      option: [],
+      // 最后检索版本
+      lastFetchId: 0,
+      // 检索中
+      searching: false,
+      searchResult: '',
+      yearShowOne: false,
+      // moment
+      moment,
+      // 树形选择框选中值
+      treeSelectValue: undefined
+    }
+  },
+  props: {
+    attr: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    form: {
+      type: Object,
+      required: true
+    },
+    disabled: {
+      type: Boolean,
+      default: () => {
+        return false
+      }
+    },
+    mode: {
+      type: String,
+      default: () => {
+        return '查询'
+      }
+    },
+    xl: {
+      type: Number,
+      default: undefined
+    },
+    xxl: {
+      type: Number,
+      default: undefined
+    },
+    files: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    images: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    serviceName: {
+      type: String,
+      default: 'af-system'
+    },
+    // 调用logic获取数据源的追加参数
+    getDataParams: {
+      type: Object,
+      default: undefined
+    }
+  },
+  created () {
+    this.init()
+  },
+  watch: {
+    attr: {
+      handler (newVal) {
+        this.init()
+      },
+      deep: true
+    },
+    form: {
+      handler (newVal) {
+        const value = newVal[this.attr.model]
+        const isEmpty = !value || !value.toString()
+        // 查询表单点击重置按钮时清空树形选择框选中状态
+        if (this.attr.type === 'treeSelect' && isEmpty) {
+          this.treeSelectValue = undefined
+        }
+      },
+      deep: true
+    }
+  },
+  methods: {
+    init () {
+      if (this.attr.keyName && this.attr.keyName.indexOf('logic@') !== -1) {
+        this.getData({}, res => {
+          this.option = res
+          // 修改时恢复树形选择框选中状态
+          if (this.attr.type === 'treeSelect' && this.attr.queryType !== 'RIGHT_LIKE') {
+            const value = this.form[this.attr.model]
+            if (value) {
+              // 如果数据源中值含'-'，代表是由多个数据源组成的树，需要重新组织新增/编辑时的表单值
+              if (this.option.length > 0 && this.option[0].value.indexOf('-') !== -1) {
+                this.treeSelectValue = this.attr.model + '-' + value
+              } else {
+                this.treeSelectValue = value
+              }
+            } else {
+              this.treeSelectValue = undefined
+            }
+          }
+        })
+      }
+    },
+    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, callback) {
+      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])
+        }
+        post('/api/' + this.serviceName + '/logic/' + logic, value).then(res => {
+          callback(res)
+        })
+      }
+    },
+    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
+      }
+    },
+    // 获取树形选择框数据
+    getTreeData () {
+      let treeData = this.attr.keys
+      if (!treeData) {
+        treeData = this.option
+      }
+      if (this.mode === '新增/修改') {
+        this.setParentSelectable(treeData)
+      }
+      return treeData
+    },
+    // 设置树形选择框不能选择父节点
+    setParentSelectable (treeData) {
+      treeData.forEach(item => {
+        if (item.children && item.children.length) {
+          item.selectable = false
+          this.setParentSelectable(item.children)
+        }
+      })
+    },
+    // 选中树节点
+    onTreeSelectChange (value, label, extra) {
+      if (this.attr.queryType === 'RIGHT_LIKE') {
+        // 获取可用于模糊查询的组织机构字符串
+        let node = extra.triggerNode.$parent
+        label = label[0]
+        while (node && node.label) {
+          label = node.label + '.' + label
+          node = node.$parent
+        }
+        this.form[this.attr.model] = label
+      } else {
+        // 如果选中值含'-'，代表是由多个数据源组成的树，需要重新组织查询或新增/编辑时的表单
+        if ((value instanceof Array && value.length > 0 && value[0].indexOf('-') !== -1) || (typeof value === 'string' && value.indexOf('-') !== -1)) {
+          const treeDatas = {}
+          // 单选情况用于新增.修改表单场景，使用extra.triggerNode获取选中节点信息
+          if (!extra.allCheckedNodes) {
+            this.setNodeData(treeDatas, extra.triggerNode)
+          } else {
+            // 多选情况用于查询表单场景，使用extra.allCheckedNodes获取选中节点集合
+            const nodes = extra.allCheckedNodes
+            // 获取任意选中节点的叶子节点的字段名，用于查询时组织查询项的key
+            const name = this.getNodeDataProps(nodes[0])
+            // 获取所有选中节点的叶子节点的value,用于查询时组织查询项的value
+            const values = []
+            for (const node of nodes) {
+              const ref = this.setDataRef(node)
+              if (ref instanceof Array) {
+                for (const nodeRef of ref) {
+                  const keyValue = nodeRef.node.key
+                  values.push(keyValue.substring(keyValue.lastIndexOf('-') + 1))
+                }
+              } else {
+                const keyValue = ref.node.key
+                values.push(keyValue.substring(keyValue.lastIndexOf('-') + 1))
+              }
+            }
+            treeDatas[name] = values
+          }
+          // 移除默认的表单项，将组织好后的表单项合并进表单
+          this.form[this.attr.model] = undefined
+          Object.assign(this.form, treeDatas)
+        } else {
+          // 从单一数据源组成的树可以直接赋值
+          this.form[this.attr.model] = value
+        }
+      }
+    },
+    setDataRef (node) {
+      if (node.children) {
+        return this.setDataRef(node.children)
+      }
+      return node
+    },
+    /**
+     * 组织节点和每层父节点的数据，用于新增/修改时更新表单数据
+     * @param data 组织完成的数据
+     * @param node 节点
+     * @return 返回示例： { parentId: 1, childId: 2 }
+     */
+    setNodeData (data, node) {
+      if (node.value) {
+        const value = node.value
+        const columnsName = value.substring(0, value.indexOf('-'))
+        data[columnsName] = value.substring(value.lastIndexOf('-') + 1)
+        if (node.$parent) {
+          this.setNodeData(data, node.$parent)
+        }
+      }
+    },
+    getNodeDataProps (node) {
+      if (node.children && node.children.length > 0) {
+        return this.getNodeDataProps(node.children[0])
+      }
+      const value = node.node.key
+      return value.substring(0, value.indexOf('-'))
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.tree-select {
+  /deep/ .ant-select-selection.ant-select-selection--multiple {
+    max-height: 32px;
+    overflow-y: auto;
+  }
+}
+</style>