n20-common-lib 1.3.46 → 1.3.49

package/nstc-g6/components/Form/Component.vue

@@ -1,661 +1,661 @@
-<template>
-  <el-form
-    :id="formID"
-    :key="formID"
-    :ref="formID"
-    :model="model"
-    :label-width="innerLabelWidth"
-    :label-position="labelPosition"
-    :rules="rules"
-    :show-message="showMessage"
-    v-bind="$attrs"
-    :class="['form-custom', `form-custom-${mode}`]"
-    v-on="$listeners"
-    @submit.native.prevent
-  >
-    <!-- 常规查询 -->
-    <BaseList
-      v-model="model"
-      :config="normalConfig"
-      :resets.sync="resets"
-      :loading="queryLoading"
-      :disableds="disableds"
-      :popper-class="computedPopperClass"
-      :formData="formData"
-      :show-mode="showMode"
-      @after-leave="val => $emit('after-leave', val)"
-      @query-click="handleExpectQuery"
-      @add-click="$emit('add-click')"
-      @other-click="$emit('other-click')"
-      @enter-click="handleExpectQuery"
-      @tree-node-click="(prop, data, node) => $emit('tree-node-click', prop, data, node)"
-    />
-
-    <div
-      v-if="isVertical && queryBtn"
-      :class="[
-        `form-item`,
-        `form-item-button`
-      ]"
-    >
-      <el-button
-        v-bind="queryBtn"
-        :loading="queryLoading"
-        :disabled="disableds.querybutton"
-        @click="handleExpectQuery"
-      >
-        {{ queryBtn.name || '查询' }}
-      </el-button>
-    </div>
-  </el-form>
-</template>
-
-<script>
-// 注： 支持的类型 请查看configs.js
-import BaseList from './List'
-
-import { SUPPORT_TYPE, getDefaultValue } from './configs'
-
-const deepEquals = (a, b) => {
-  if (Array.isArray(a) && Array.isArray(b)) {
-    if (a.length !== b.length) {
-      return false
-    }
-
-    for (let i = 0; i < a.length; i++) {
-      if (a[i] !== b[i]) {
-        return false
-      }
-    }
-
-    return true
-  }
-
-  return a === b
-}
-export default {
-  name: 'NstcForm',
-
-  components: {
-    BaseList
-  },
-
-  inheritAttrs: false,
-
-  props: {
-    formData: {
-      type: Object,
-      default: () => ({})
-    },
-    from: {
-      type: String,
-      default: null
-    },
-    config: {
-      type: Array,
-      default: () => []
-    },
-
-    popperClass: {
-      type: String,
-      default: ''
-    },
-
-    reset: {
-      type: Boolean,
-      default: false
-    },
-
-    // 组件加载完成时， 执行一次默认查询
-    mountAndQuery: {
-      type: Boolean,
-      default: true
-    },
-
-    // 用于表单异步时 手动触发查询
-    asyncQuery: {
-      default: false,
-      type: Boolean
-    },
-
-    // 样式 ： 水平 | 垂直
-    mode: {
-      default: 'horizontal',
-      validator: function(val) {
-        return ['horizontal', 'vertical'].includes(val)
-      }
-    },
-
-    // 是否是纯净模式 (删除 renderable === false 的item.prop对应model的值)
-    pureable: {
-      default: false,
-      type: Boolean
-    },
-
-    value: {
-      default: () => ({}),
-      type: Object
-    },
-
-    showMessage: {
-      type: Boolean,
-      default: true
-    },
-
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-
-    labelPosition: {
-      type: String,
-      default: 'right'
-    },
-
-    labelWidth: {
-      default: '136px',
-      type: [String, Number]
-    },
-
-    rules: {
-      type: Object,
-      default: undefined
-    },
-
-    // 显示模式
-    showMode: {
-      type: String,
-      default: ''
-    }
-  },
-
-  data() {
-    return {
-      resets: {},
-
-      disableds: {
-        querybutton: false
-      },
-
-      formID: `formID-${Math.random()
-        .toString(36)
-        .slice(2)}`,
-
-      linkItems: [],
-      unwatchers: [],
-
-      queryBtn: null,
-
-      normalConfig: [],
-
-      uploadKeys: new Set([]),
-
-      isRendering: false,
-      queryLoading: false,
-      innerMountAndQuery: false,
-      isInit: true
-    }
-  },
-
-  computed: {
-    model: {
-      get() {
-        return this.value
-      },
-      set(val) {
-        this.$emit('input', val)
-        this.$emit('change', val)
-      }
-    },
-
-    isVertical() {
-      return this.mode === 'vertical'
-    },
-
-    computedPopperClass() {
-      return (this.isVertical ? ['form-custom-popper', this.popperClass] : []).join(' ')
-    },
-
-    innerLabelWidth() {
-      return (this.labelWidth + '').replace(/px/, '') + 'px'
-    }
-
-  },
-
-  watch: {
-    config: {
-      deep: true,
-      immediate: true,
-      handler: function(newVal) {
-        if (!this.isRendering  && newVal.length) {
-          this.init()
-        }
-      }
-    },
-
-    value: {
-      deep: true,
-      immediate: true,
-      handler: function(newVal) {
-        if (!this.isEmptyObject(newVal) && !this.isRendering && this.innerMountAndQuery) {
-          this.innerMountAndQuery = false
-          this.handleExpectQuery()
-        }
-      }
-    },
-
-    reset(newVal) {
-      console.log('__log_reset', newVal)
-      if (newVal) {
-        this.init()
-        console.log('__log_reset', newVal)
-
-        // temporary hack
-        this.setResets(true)
-
-        this.$emit('update:reset', false)
-      }
-    },
-
-    disabled(newVal, oldVal) {
-      if (newVal !== oldVal) {
-        this.setDisableds(newVal)
-
-        this.$emit('disabled')
-      }
-    },
-
-    asyncQuery(newVal) {
-      if (newVal) {
-        this.$nextTick(() => {
-          this.handleExpectQuery()
-          this.$emit('update:asyncQuery', false)
-        })
-      }
-    }
-  },
-
-  created() {
-    //    this.innerMountAndQuery = this.mountAndQuery;
-  },
-
-  methods: {
-    init() {
-      if (!this.isRendering) {
-        this.isRendering = true
-
-        this.clearValidate()
-
-        this.uploadKeys.clear()
-
-        this.disableds = {
-          querybutton: this.disabled
-        }
-
-        const {
-          querybutton,
-          normalItems = []
-        } = this.separateAdvanceAndNormal(this.config)
-        this.normalConfig = normalItems
-
-        this.generateFormModel(normalItems)
-
-        this.queryBtn = querybutton
-
-        this.generateLink()
-
-        this.innerMountAndQuery = this.mountAndQuery
-
-        this.isInit = false
-
-        this.isRendering = false
-      }
-    },
-
-    generateFormModel(config) {
-      if (Array.isArray(config)) {
-        config.forEach(item => {
-          if (Array.isArray(item)) {
-            this.generateFormModel(item)
-          } else {
-            if (!item.mold) {
-              throw Error(
-                `Each config's child must has a 'mold' prop, it could be ${SUPPORT_TYPE.concat(
-                  'querybutton'
-                ).join('|')}`
-              )
-            }
-
-            item.mold = item.mold.toLowerCase()
-
-            this.setModel(item)
-
-            if (item.link) {
-              this.linkItems.push(item)
-            }
-          }
-        })
-      } else {
-        if (!Object.keys(config).length) {
-          return
-        }
-
-        if (!config.mold) {
-          throw Error(
-            `Each config's child must has a 'mold' prop, it could be ${SUPPORT_TYPE.concat(
-              'querybutton'
-            ).join('|')}`
-          )
-        }
-
-        config.mold = config.mold.toLowerCase()
-
-        this.setModel(config)
-      }
-    },
-
-    generateLink() {
-      while (this.unwatchers.length) {
-        this.unwatchers.pop()()
-      }
-
-      this.linkItems.map(item => {
-        this.setWatchers(item)
-      })
-
-      this.linkItems = []
-    },
-
-    /**
-     * item
-     * setValue,(第二个参数)
-     */
-    setModel(item) {
-      let { prop, mold } = item
-
-      if (this.pureable) { // 纯净模式
-        if (item.renderable === false) {
-          this.$delete(this.model, prop)
-          return
-        }
-      }
-
-      prop = prop || mold
-
-      const matchedResult = getDefaultValue(item)
-
-      if (matchedResult !== null) {
-        if (!(this.isInit && this.model[prop] !== undefined)) {
-          this.$set(this.model, prop, matchedResult.value)
-          // this.$set(this.model, prop, (setValue ? this.model[prop] : matchedResult.value) || matchedResult.value);
-        }
-
-        this.$set(this.resets, prop, false)
-        this.$set(this.disableds, prop, this.disabled || item.disabled)
-      }
-    },
-
-    setWatchers(item) {
-      const { link, prop: itemProp } = item
-      let isOneToLinkAll = false
-      let links; let isComplex
-
-      if (Array.isArray(link)) {
-        links = link
-        isOneToLinkAll = links.every(item => item.mold)
-        isComplex = !!(links.find(item => item.mold) && links.find(item => !item.mold))
-      } else {
-        links = [link]
-      }
-
-      links.forEach(link =>
-        this.setSingleLinkWatch(link, itemProp, isOneToLinkAll, isComplex, link.mold)
-      )
-    },
-
-    setSingleLinkWatch(link, itemProp, isOneToLinkAll, isComplex, isModelEverGenerated) {
-      const { prop, handler, mold } = link
-
-      if (!this.isFunc(handler)) {
-        return
-      }
-
-      let targetProp, watchedProp
-
-      if (isOneToLinkAll) {
-        this.generateFormModel(link)
-        targetProp = itemProp
-        watchedProp = prop
-      } else if (isComplex) {
-        if (isModelEverGenerated) {
-          this.generateFormModel(link)
-        }
-        targetProp = itemProp
-        watchedProp = prop
-      } else {
-        if (mold) {
-          this.generateFormModel(link)
-          targetProp = prop
-          watchedProp = itemProp
-        } else {
-          targetProp = itemProp
-          watchedProp = prop
-        }
-      }
-
-      const unwatcher = this.$watch(`model.${targetProp}`, {
-        immediate: true,
-        deep: true,
-        handler: async function(newVal, oldVal) {
-          if (watchedProp) {
-            if (!deepEquals(newVal, oldVal)) {
-              const defaultAndOptions = await handler(newVal)
-
-              const newItem = {
-                prop: watchedProp,
-                ...defaultAndOptions
-              }
-
-              this.replaceOptions(newItem)
-            }
-          }
-        }
-      })
-
-      this.unwatchers.push(unwatcher)
-    },
-
-    replaceOptions({ prop, ...pramas }, config) {
-      let finded = false
-
-      const replaceOptionsHelper = ({ prop, pramas }, config) => {
-        if (finded) {
-          return
-        }
-
-        const tConfig = config || this.normalConfig
-
-        tConfig.forEach((item, idx) => {
-          if (Array.isArray(item)) {
-            replaceOptionsHelper(
-              {
-                prop,
-                pramas
-              },
-              item
-            )
-          } else if (Array.isArray(item.link) && !(item.prop === prop && item.mold)) {
-            replaceOptionsHelper(
-              {
-                prop,
-                pramas
-              },
-              item.link
-            )
-          } else {
-            if (item.prop === prop && item.mold) {
-              finded = true
-              const newItem = { ...item, ...pramas }
-
-              tConfig.splice(idx, 1, newItem)
-
-              if (newItem.mold) {
-                this.setModel(newItem, true)
-              }
-            }
-          }
-        })
-      }
-
-      replaceOptionsHelper({ prop, pramas }, config)
-    },
-
-    setResets(val = false, prop = null) {
-      if (prop) {
-        this.resets[prop] = val
-      } else {
-        Object.keys(this.resets).forEach(key => {
-          this.resets[key] = val
-        })
-      }
-      this.$nextTick(() => {
-        this.resetFields()
-      })
-    },
-
-    setDisableds(val = false, prop = null) {
-      if (prop) {
-        this.disableds[prop] = val
-      } else {
-        Object.keys(this.disableds).forEach(key => {
-          this.disableds[key] = val
-        })
-      }
-    },
-
-    separateAdvanceAndNormal(config = this.config) {
-      const isVertical = this.isVertical
-
-      const reducer = config => config.reduce(
-        (prev, item) => {
-          if (Array.isArray(item)) {
-            const { normalItems, ...rest } = reducer(item)
-
-            normalItems.length && prev.normalItems.push(normalItems)
-
-            return {
-              ...prev,
-              ...rest
-            }
-          } else {
-            const { mold } = item
-            //            if (mold === "upload") {
-            //              this.uploadKeys.add(prop);
-            //            }
-
-            if (isVertical) {
-              if (mold === 'querybutton') {
-                prev[mold] = item
-              } else {
-                prev.normalItems.push(item)
-              }
-            } else {
-              prev.normalItems.push(item)
-            }
-          }
-
-          return prev
-        },
-        {
-          normalItems: []
-        }
-      )
-
-      return reducer(config)
-    },
-
-    isFunc(callBack) {
-      return callBack && typeof callBack === 'function'
-    },
-
-    isEmptyObject(obj) {
-      const isObj = Object.prototype.toString.call(obj).toLowerCase() !== '[object object]'
-      return !Object.keys(isObj ? {} : obj).length
-    },
-
-    async handleExpectQuery(config) {
-      this.queryLoading = true
-
-      try {
-        if (this.$listeners.query) {
-          await this.validate()
-
-          let model
-
-          if (this.uploadKeys.size) {
-            model = this.convertModelToFormData(this.model)
-            config = {
-              headers: {
-                'Content-Type': 'multipart/form-data'
-              },
-              ...config
-            }
-          } else {
-            model = JSON.parse(JSON.stringify(this.model))
-          }
-
-          await this.$listeners.query(model, config)
-        } else {
-          throw new Error(
-            'must specify @query event when there is a query button'
-          )
-        }
-      } catch (err) {
-        console.error('form custom error -> handleExpectQuery:', err)
-      } finally {
-        this.queryLoading = false
-      }
-    },
-
-    convertModelToFormData(model) {
-      const fd = new FormData()
-      Object.entries(model).forEach(([key, value]) => {
-        fd.append(key, value instanceof window.FormData ? value.get(key) : value)
-      })
-      return fd
-    },
-
-    clearValidate() {
-      if (this.rules && this.$refs[this.formID]) {
-        this.$refs[this.formID] && this.$refs[this.formID].clearValidate()
-      }
-    },
-
-    resetFields() {
-      console.log('__log_formID', this.formID, this.$refs[this.formID])
-      this.$refs[this.formID] && this.$refs[this.formID].resetFields()
-    },
-
-    validate() {
-      if (this.rules && this.$refs[this.formID]) {
-        return this.$refs[this.formID].validate()
-      }
-
-      return Promise.resolve()
-    },
-
-    /**
-     * 生成formId
-     */
-    createFormId() {
-      return `formID-${Math.random()
-        .toString(36)
-        .slice(2)}`
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-@import "index";
-</style>
+<template>
+  <el-form
+    :id="formID"
+    :key="formID"
+    :ref="formID"
+    :model="model"
+    :label-width="innerLabelWidth"
+    :label-position="labelPosition"
+    :rules="rules"
+    :show-message="showMessage"
+    v-bind="$attrs"
+    :class="['form-custom', `form-custom-${mode}`]"
+    v-on="$listeners"
+    @submit.native.prevent
+  >
+    <!-- 常规查询 -->
+    <BaseList
+      v-model="model"
+      :config="normalConfig"
+      :resets.sync="resets"
+      :loading="queryLoading"
+      :disableds="disableds"
+      :popper-class="computedPopperClass"
+      :formData="formData"
+      :show-mode="showMode"
+      @after-leave="val => $emit('after-leave', val)"
+      @query-click="handleExpectQuery"
+      @add-click="$emit('add-click')"
+      @other-click="$emit('other-click')"
+      @enter-click="handleExpectQuery"
+      @tree-node-click="(prop, data, node) => $emit('tree-node-click', prop, data, node)"
+    />
+
+    <div
+      v-if="isVertical && queryBtn"
+      :class="[
+        `form-item`,
+        `form-item-button`
+      ]"
+    >
+      <el-button
+        v-bind="queryBtn"
+        :loading="queryLoading"
+        :disabled="disableds.querybutton"
+        @click="handleExpectQuery"
+      >
+        {{ queryBtn.name || '查询' }}
+      </el-button>
+    </div>
+  </el-form>
+</template>
+
+<script>
+// 注： 支持的类型 请查看configs.js
+import BaseList from './List'
+
+import { SUPPORT_TYPE, getDefaultValue } from './configs'
+
+const deepEquals = (a, b) => {
+  if (Array.isArray(a) && Array.isArray(b)) {
+    if (a.length !== b.length) {
+      return false
+    }
+
+    for (let i = 0; i < a.length; i++) {
+      if (a[i] !== b[i]) {
+        return false
+      }
+    }
+
+    return true
+  }
+
+  return a === b
+}
+export default {
+  name: 'NstcForm',
+
+  components: {
+    BaseList
+  },
+
+  inheritAttrs: false,
+
+  props: {
+    formData: {
+      type: Object,
+      default: () => ({})
+    },
+    from: {
+      type: String,
+      default: null
+    },
+    config: {
+      type: Array,
+      default: () => []
+    },
+
+    popperClass: {
+      type: String,
+      default: ''
+    },
+
+    reset: {
+      type: Boolean,
+      default: false
+    },
+
+    // 组件加载完成时， 执行一次默认查询
+    mountAndQuery: {
+      type: Boolean,
+      default: true
+    },
+
+    // 用于表单异步时 手动触发查询
+    asyncQuery: {
+      default: false,
+      type: Boolean
+    },
+
+    // 样式 ： 水平 | 垂直
+    mode: {
+      default: 'horizontal',
+      validator: function(val) {
+        return ['horizontal', 'vertical'].includes(val)
+      }
+    },
+
+    // 是否是纯净模式 (删除 renderable === false 的item.prop对应model的值)
+    pureable: {
+      default: false,
+      type: Boolean
+    },
+
+    value: {
+      default: () => ({}),
+      type: Object
+    },
+
+    showMessage: {
+      type: Boolean,
+      default: true
+    },
+
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+
+    labelPosition: {
+      type: String,
+      default: 'right'
+    },
+
+    labelWidth: {
+      default: '136px',
+      type: [String, Number]
+    },
+
+    rules: {
+      type: Object,
+      default: undefined
+    },
+
+    // 显示模式
+    showMode: {
+      type: String,
+      default: ''
+    }
+  },
+
+  data() {
+    return {
+      resets: {},
+
+      disableds: {
+        querybutton: false
+      },
+
+      formID: `formID-${Math.random()
+        .toString(36)
+        .slice(2)}`,
+
+      linkItems: [],
+      unwatchers: [],
+
+      queryBtn: null,
+
+      normalConfig: [],
+
+      uploadKeys: new Set([]),
+
+      isRendering: false,
+      queryLoading: false,
+      innerMountAndQuery: false,
+      isInit: true
+    }
+  },
+
+  computed: {
+    model: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+        this.$emit('change', val)
+      }
+    },
+
+    isVertical() {
+      return this.mode === 'vertical'
+    },
+
+    computedPopperClass() {
+      return (this.isVertical ? ['form-custom-popper', this.popperClass] : []).join(' ')
+    },
+
+    innerLabelWidth() {
+      return (this.labelWidth + '').replace(/px/, '') + 'px'
+    }
+
+  },
+
+  watch: {
+    config: {
+      deep: true,
+      immediate: true,
+      handler: function(newVal) {
+        if (!this.isRendering  && newVal.length) {
+          this.init()
+        }
+      }
+    },
+
+    value: {
+      deep: true,
+      immediate: true,
+      handler: function(newVal) {
+        if (!this.isEmptyObject(newVal) && !this.isRendering && this.innerMountAndQuery) {
+          this.innerMountAndQuery = false
+          this.handleExpectQuery()
+        }
+      }
+    },
+
+    reset(newVal) {
+      console.log('__log_reset', newVal)
+      if (newVal) {
+        this.init()
+        console.log('__log_reset', newVal)
+
+        // temporary hack
+        this.setResets(true)
+
+        this.$emit('update:reset', false)
+      }
+    },
+
+    disabled(newVal, oldVal) {
+      if (newVal !== oldVal) {
+        this.setDisableds(newVal)
+
+        this.$emit('disabled')
+      }
+    },
+
+    asyncQuery(newVal) {
+      if (newVal) {
+        this.$nextTick(() => {
+          this.handleExpectQuery()
+          this.$emit('update:asyncQuery', false)
+        })
+      }
+    }
+  },
+
+  created() {
+    //    this.innerMountAndQuery = this.mountAndQuery;
+  },
+
+  methods: {
+    init() {
+      if (!this.isRendering) {
+        this.isRendering = true
+
+        this.clearValidate()
+
+        this.uploadKeys.clear()
+
+        this.disableds = {
+          querybutton: this.disabled
+        }
+
+        const {
+          querybutton,
+          normalItems = []
+        } = this.separateAdvanceAndNormal(this.config)
+        this.normalConfig = normalItems
+
+        this.generateFormModel(normalItems)
+
+        this.queryBtn = querybutton
+
+        this.generateLink()
+
+        this.innerMountAndQuery = this.mountAndQuery
+
+        this.isInit = false
+
+        this.isRendering = false
+      }
+    },
+
+    generateFormModel(config) {
+      if (Array.isArray(config)) {
+        config.forEach(item => {
+          if (Array.isArray(item)) {
+            this.generateFormModel(item)
+          } else {
+            if (!item.mold) {
+              throw Error(
+                `Each config's child must has a 'mold' prop, it could be ${SUPPORT_TYPE.concat(
+                  'querybutton'
+                ).join('|')}`
+              )
+            }
+
+            item.mold = item.mold.toLowerCase()
+
+            this.setModel(item)
+
+            if (item.link) {
+              this.linkItems.push(item)
+            }
+          }
+        })
+      } else {
+        if (!Object.keys(config).length) {
+          return
+        }
+
+        if (!config.mold) {
+          throw Error(
+            `Each config's child must has a 'mold' prop, it could be ${SUPPORT_TYPE.concat(
+              'querybutton'
+            ).join('|')}`
+          )
+        }
+
+        config.mold = config.mold.toLowerCase()
+
+        this.setModel(config)
+      }
+    },
+
+    generateLink() {
+      while (this.unwatchers.length) {
+        this.unwatchers.pop()()
+      }
+
+      this.linkItems.map(item => {
+        this.setWatchers(item)
+      })
+
+      this.linkItems = []
+    },
+
+    /**
+     * item
+     * setValue,(第二个参数)
+     */
+    setModel(item) {
+      let { prop, mold } = item
+
+      if (this.pureable) { // 纯净模式
+        if (item.renderable === false) {
+          this.$delete(this.model, prop)
+          return
+        }
+      }
+
+      prop = prop || mold
+
+      const matchedResult = getDefaultValue(item)
+
+      if (matchedResult !== null) {
+        if (!(this.isInit && this.model[prop] !== undefined)) {
+          this.$set(this.model, prop, matchedResult.value)
+          // this.$set(this.model, prop, (setValue ? this.model[prop] : matchedResult.value) || matchedResult.value);
+        }
+
+        this.$set(this.resets, prop, false)
+        this.$set(this.disableds, prop, this.disabled || item.disabled)
+      }
+    },
+
+    setWatchers(item) {
+      const { link, prop: itemProp } = item
+      let isOneToLinkAll = false
+      let links; let isComplex
+
+      if (Array.isArray(link)) {
+        links = link
+        isOneToLinkAll = links.every(item => item.mold)
+        isComplex = !!(links.find(item => item.mold) && links.find(item => !item.mold))
+      } else {
+        links = [link]
+      }
+
+      links.forEach(link =>
+        this.setSingleLinkWatch(link, itemProp, isOneToLinkAll, isComplex, link.mold)
+      )
+    },
+
+    setSingleLinkWatch(link, itemProp, isOneToLinkAll, isComplex, isModelEverGenerated) {
+      const { prop, handler, mold } = link
+
+      if (!this.isFunc(handler)) {
+        return
+      }
+
+      let targetProp, watchedProp
+
+      if (isOneToLinkAll) {
+        this.generateFormModel(link)
+        targetProp = itemProp
+        watchedProp = prop
+      } else if (isComplex) {
+        if (isModelEverGenerated) {
+          this.generateFormModel(link)
+        }
+        targetProp = itemProp
+        watchedProp = prop
+      } else {
+        if (mold) {
+          this.generateFormModel(link)
+          targetProp = prop
+          watchedProp = itemProp
+        } else {
+          targetProp = itemProp
+          watchedProp = prop
+        }
+      }
+
+      const unwatcher = this.$watch(`model.${targetProp}`, {
+        immediate: true,
+        deep: true,
+        handler: async function(newVal, oldVal) {
+          if (watchedProp) {
+            if (!deepEquals(newVal, oldVal)) {
+              const defaultAndOptions = await handler(newVal)
+
+              const newItem = {
+                prop: watchedProp,
+                ...defaultAndOptions
+              }
+
+              this.replaceOptions(newItem)
+            }
+          }
+        }
+      })
+
+      this.unwatchers.push(unwatcher)
+    },
+
+    replaceOptions({ prop, ...pramas }, config) {
+      let finded = false
+
+      const replaceOptionsHelper = ({ prop, pramas }, config) => {
+        if (finded) {
+          return
+        }
+
+        const tConfig = config || this.normalConfig
+
+        tConfig.forEach((item, idx) => {
+          if (Array.isArray(item)) {
+            replaceOptionsHelper(
+              {
+                prop,
+                pramas
+              },
+              item
+            )
+          } else if (Array.isArray(item.link) && !(item.prop === prop && item.mold)) {
+            replaceOptionsHelper(
+              {
+                prop,
+                pramas
+              },
+              item.link
+            )
+          } else {
+            if (item.prop === prop && item.mold) {
+              finded = true
+              const newItem = { ...item, ...pramas }
+
+              tConfig.splice(idx, 1, newItem)
+
+              if (newItem.mold) {
+                this.setModel(newItem, true)
+              }
+            }
+          }
+        })
+      }
+
+      replaceOptionsHelper({ prop, pramas }, config)
+    },
+
+    setResets(val = false, prop = null) {
+      if (prop) {
+        this.resets[prop] = val
+      } else {
+        Object.keys(this.resets).forEach(key => {
+          this.resets[key] = val
+        })
+      }
+      this.$nextTick(() => {
+        this.resetFields()
+      })
+    },
+
+    setDisableds(val = false, prop = null) {
+      if (prop) {
+        this.disableds[prop] = val
+      } else {
+        Object.keys(this.disableds).forEach(key => {
+          this.disableds[key] = val
+        })
+      }
+    },
+
+    separateAdvanceAndNormal(config = this.config) {
+      const isVertical = this.isVertical
+
+      const reducer = config => config.reduce(
+        (prev, item) => {
+          if (Array.isArray(item)) {
+            const { normalItems, ...rest } = reducer(item)
+
+            normalItems.length && prev.normalItems.push(normalItems)
+
+            return {
+              ...prev,
+              ...rest
+            }
+          } else {
+            const { mold } = item
+            //            if (mold === "upload") {
+            //              this.uploadKeys.add(prop);
+            //            }
+
+            if (isVertical) {
+              if (mold === 'querybutton') {
+                prev[mold] = item
+              } else {
+                prev.normalItems.push(item)
+              }
+            } else {
+              prev.normalItems.push(item)
+            }
+          }
+
+          return prev
+        },
+        {
+          normalItems: []
+        }
+      )
+
+      return reducer(config)
+    },
+
+    isFunc(callBack) {
+      return callBack && typeof callBack === 'function'
+    },
+
+    isEmptyObject(obj) {
+      const isObj = Object.prototype.toString.call(obj).toLowerCase() !== '[object object]'
+      return !Object.keys(isObj ? {} : obj).length
+    },
+
+    async handleExpectQuery(config) {
+      this.queryLoading = true
+
+      try {
+        if (this.$listeners.query) {
+          await this.validate()
+
+          let model
+
+          if (this.uploadKeys.size) {
+            model = this.convertModelToFormData(this.model)
+            config = {
+              headers: {
+                'Content-Type': 'multipart/form-data'
+              },
+              ...config
+            }
+          } else {
+            model = JSON.parse(JSON.stringify(this.model))
+          }
+
+          await this.$listeners.query(model, config)
+        } else {
+          throw new Error(
+            'must specify @query event when there is a query button'
+          )
+        }
+      } catch (err) {
+        console.error('form custom error -> handleExpectQuery:', err)
+      } finally {
+        this.queryLoading = false
+      }
+    },
+
+    convertModelToFormData(model) {
+      const fd = new FormData()
+      Object.entries(model).forEach(([key, value]) => {
+        fd.append(key, value instanceof window.FormData ? value.get(key) : value)
+      })
+      return fd
+    },
+
+    clearValidate() {
+      if (this.rules && this.$refs[this.formID]) {
+        this.$refs[this.formID] && this.$refs[this.formID].clearValidate()
+      }
+    },
+
+    resetFields() {
+      console.log('__log_formID', this.formID, this.$refs[this.formID])
+      this.$refs[this.formID] && this.$refs[this.formID].resetFields()
+    },
+
+    validate() {
+      if (this.rules && this.$refs[this.formID]) {
+        return this.$refs[this.formID].validate()
+      }
+
+      return Promise.resolve()
+    },
+
+    /**
+     * 生成formId
+     */
+    createFormId() {
+      return `formID-${Math.random()
+        .toString(36)
+        .slice(2)}`
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import "index";
+</style>