n20-common-lib 1.3.4 → 1.3.7

package/src/components/NstcG6Components/Form/Component.vue

@@ -1,661 +0,0 @@
-<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>