n20-common-lib 1.3.8 → 1.3.11

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

@@ -0,0 +1,684 @@
+<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"
+      :form-data="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 input-w', 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>