n20-project-component 1.0.3 → 1.0.5

package/src/components/ProFilterView/AdvancedFilter/formItemRender.vue

@@ -0,0 +1,847 @@
+<script>
+import asciiWidth from 'n20-common-lib/src/utils/asciiWidth'
+import axios from 'n20-common-lib/src/utils/axios'
+import forEachs from 'n20-common-lib/src/utils/forEachs'
+import { $lc } from 'n20-common-lib/src/utils/i18n/index.js'
+import datePickerPor from 'n20-common-lib/src/components/DatePicker/por.vue'
+import inputNumber from 'n20-common-lib/src/components/InputNumber/index.vue'
+import InputNumberRange from 'n20-common-lib/src/components/InputNumber/numberRange.vue'
+import selectTree from 'n20-common-lib/src/components/SelectTree/index.vue'
+import selectTreePro from 'n20-common-lib/src/components/SelectTree/pro.vue'
+
+const canvas = document.createElement('canvas')
+const context = canvas.getContext('2d')
+context.font = '14px Ping Fang SC'
+export default {
+  name: 'FormItemRender',
+  components: {
+    inputNumber,
+    selectTree,
+    selectTreePro,
+    InputNumberRange,
+    datePickerPor
+  },
+  inject: {
+    nFilter: { default: null }
+  },
+  props: {
+    form: {
+      type: Object,
+      default: undefined
+    },
+    item: {
+      type: Object,
+      default: undefined
+    }
+  },
+  data() {
+    return {
+      context
+    }
+  },
+
+  created() {
+    if (this.item.reqOptions) {
+      this.getOptions()
+    }
+  },
+  methods: {
+    handleBlur() {
+      this.$emit('blur')
+    },
+    handleClear() {
+      this.$emit('clean')
+    },
+    handleFilter() {
+      this.$emit('filter')
+    },
+    handleEnter() {
+      this.$emit('enter')
+    },
+    handleChange(value) {
+      this.$emit('change', { field: this.item.value, value, item: this.item })
+    },
+    handleVisibleChange(value) {
+      if (!value) {
+        this.handleFilter()
+      }
+    },
+    getOptions() {
+      let reqOptions = this.item.reqOptions
+      let url = reqOptions.url || ''
+      url = url.includes('?') ? `${url}r=${Math.random()}` : `${url}?r=${Math.random()}`
+      axios({
+        ...reqOptions,
+        url: url,
+        loading: false,
+        noMsg: true,
+        resList: undefined
+      }).then((res) => {
+        let resKeys = reqOptions.resList ? reqOptions.resList.split('.') : ['data', 'list']
+
+        let list = res
+        resKeys.forEach((key) => {
+          list = list[key]
+        })
+        this.$set(this.item, 'options', list)
+        // 同步更新 filterList 中的 options，确保两者一致，
+        // 防止 AdvancedFilter 的 filterList watcher 用旧数据覆盖 reqOptions 结果
+        const nf = this.nFilter
+        if (nf) {
+          const filterItem = nf.filterList.find((f) => f[nf.onlyKey] === this.item[nf.onlyKey])
+          if (filterItem) {
+            this.$set(filterItem, 'options', list)
+          }
+        }
+      })
+    }
+  },
+  render(h) {
+    const { item, form, context } = this
+
+    let elementDom = null
+
+    let typeEnum = (type) => {
+      switch (type) {
+        case 'text':
+        case 'number':
+        case 'text':
+        case 'numberrange':
+          return $lc('请输入')
+        case 'select':
+        case 'search':
+        case 'date':
+        case 'datetime':
+        case 'year':
+        case 'month':
+        case 'week':
+        case 'daterange':
+        case 'datetimerange':
+        case 'monthrange':
+        case 'checkbox':
+        case 'radio':
+          return $lc('请选择')
+      }
+    }
+
+    // 获取文本宽度
+    const getWidth = (label, type) => {
+      if (!label) {
+        return 0
+      }
+      if (!type) {
+        return context.measureText(label).width
+      }
+      return (context.measureText(label).width * 1.4 + 100) * 2
+    }
+
+    let w = 76
+    if (item.placeholder) {
+      w = asciiWidth(item.placeholder || typeEnum(item.type)) + 34
+      if (/px$/.test(item.width)) {
+        w = item.width.replace(/px$/, '')
+      }
+    }
+
+    // 计算text框内容宽度
+    const calcTextWidth = (item, value) => {
+      let textMaxWidth,
+        textMinWidth = 76
+      if (item.required) {
+        textMaxWidth = 426 - getWidth(item.label) - 33
+      } else {
+        textMaxWidth = 426 - getWidth(item.label) - 14
+      }
+
+      // 没有内容时
+      if (!value) {
+        return textMinWidth + 'px'
+      }
+      // 输入内容+边距小于最小默认值时
+      if (getWidth(value) + 32 < textMinWidth) {
+        return textMinWidth + 'px'
+      }
+      // 输入内容+边距大于最大默认值时
+      if (getWidth(value) + 32 > textMaxWidth) {
+        return textMaxWidth + 'px'
+      }
+
+      return getWidth(value) + 32 + 'px'
+    }
+
+    const calcWidth = (value, type, label) => {
+      let MAX_WIDTH = 426 - getWidth(label) - 16
+      let W = null
+      if (!Array.isArray(value)) {
+        if (!value) {
+          if (type) {
+            return Number(w) + 110 + 'px'
+          }
+          return w + 'px'
+        }
+        if (getWidth(value, type) > w) {
+          if (getWidth(value, type) > MAX_WIDTH) {
+            W = MAX_WIDTH
+          } else {
+            W = getWidth(value, type)
+          }
+        } else {
+          if (type) {
+            W = w || asciiWidth(item.placeholder || typeEnum[item.type]) + 150
+          } else {
+            W = w || asciiWidth(item.placeholder || typeEnum[item.type]) + 40
+          }
+        }
+      } else {
+        if (!value[0] && !value[1]) {
+          return Number(w) + 110 + 'px'
+        }
+        let widthMax = getWidth(value[0]) + getWidth(value[1]) + 35
+        if (widthMax > w) {
+          if (widthMax > MAX_WIDTH) {
+            W = MAX_WIDTH
+          } else {
+            W = widthMax
+          }
+        }
+      }
+
+      return W + 'px'
+    }
+    const recursionFind = (data, value, key, name) => {
+      let found
+      forEachs(data, (item) => {
+        if (item[key] === value) {
+          found = item[name]
+        }
+        if (item.children && !found) {
+          found = recursionFind(item.children, value, key, name)
+        }
+      })
+
+      return found
+    }
+
+    // 计算selectTree内容宽度
+    const calcSelectTreeWidth = (item, value) => {
+      let textMaxWidth = 346 - getWidth(item.label) - 16
+      const multiple = item?.props?.multiple
+      const textMinWidth = 76
+
+      if (!multiple) {
+        if (!value) {
+          return textMinWidth + 'px'
+        } else {
+          let selectedName = ''
+          selectedName = recursionFind(
+            item.options,
+            value,
+            item?.props?.props?.value || item?.props?.defineProps?.value || 'value',
+            item?.props?.props?.label || item?.props?.defineProps?.label || 'label'
+          )
+
+          return getWidth(selectedName) + 'px'
+        }
+      } else {
+        if (!value?.length) {
+          return textMinWidth + 'px'
+        } else {
+          let selectedName = recursionFind(
+            item.options,
+            value[0],
+            item?.props?.props?.value || item?.props?.defineProps?.value || 'value',
+            item?.props?.props?.label || item?.props?.defineProps?.label || 'label'
+          )
+          if (value?.length > 1) {
+            return getWidth(selectedName) + 32 > textMaxWidth
+              ? textMaxWidth + 'px'
+              : getWidth(selectedName) + 110 + 'px'
+          } else {
+            return getWidth(selectedName) + 32 < textMinWidth ? textMinWidth + 'px' : getWidth(selectedName) + 84 + 'px'
+          }
+        }
+      }
+    }
+    // 计算select内容宽度
+    const calcSelectWidth = (item, value) => {
+      let textMaxWidth = 426 - getWidth(item.label) - 16
+      let textMinWidth = 76
+      const multiple = item.props?.multiple || item?.multiple || false
+      if (!multiple) {
+        if (!value) {
+          return textMinWidth + 'px'
+        } else {
+          let selectedName = recursionFind(
+            item.options,
+            value,
+            item.props?.valueKey || 'value',
+            item.props?.labelKey || 'label'
+          )
+          if (getWidth(selectedName) + 32 > textMaxWidth) {
+            return textMaxWidth + 'px'
+          }
+          if (getWidth(selectedName) + 32 < textMinWidth) {
+            return textMinWidth + 'px'
+          }
+          return getWidth(selectedName) + 32 + 'px'
+        }
+      } else {
+        if (!value?.length) {
+          return textMinWidth + 'px'
+        } else {
+          let selectedName = recursionFind(
+            item.options,
+            value[0],
+            item.props?.valueKey || 'value',
+            item.props?.labelKey || 'label'
+          )
+          if (value?.length > 1) {
+            return getWidth(selectedName) + 32 > textMaxWidth
+              ? textMaxWidth + 'px'
+              : getWidth(selectedName) > 88
+              ? '170px'
+              : getWidth(selectedName) + 110 + 'px'
+          } else {
+            return getWidth(selectedName) > 88
+              ? '128px'
+              : getWidth(selectedName) + 32 < textMinWidth
+              ? textMinWidth + 'px'
+              : getWidth(selectedName) + 84 + 'px'
+          }
+        }
+      }
+    }
+    // 计算区间内容宽度
+    const calcRangeWidth = (item, value, value2) => {
+      let textMaxWidth = 426 - getWidth(item.label) - 16
+      let textMinWidth = 160
+      if (!value && !value2) {
+        return textMinWidth + 'px'
+      } else {
+        if (!value || !value2) {
+          let widthMax = (getWidth(value) + getWidth(value2) + 72) * 2
+          if (widthMax < textMinWidth) {
+            return textMinWidth + 'px'
+          }
+          if (widthMax > textMaxWidth) {
+            return textMaxWidth + 'px'
+          }
+          return widthMax + 'px'
+        } else {
+          let widthMax = getWidth(value) + getWidth(value2) + 140
+          if (widthMax < textMinWidth) {
+            return textMinWidth + 'px'
+          }
+          if (widthMax > textMaxWidth) {
+            return textMaxWidth + 'px'
+          }
+          return widthMax + 'px'
+        }
+      }
+    }
+
+    const calcDateWidth = (item, value) => {
+      let textMaxWidth = 382 - getWidth(item.label) - 16
+      let textMinWidth = 76
+      if (!value) {
+        return textMinWidth + 'px'
+      } else {
+        if (getWidth(value) + 32 < textMinWidth) {
+          return textMinWidth + 'px'
+        }
+        if (getWidth(value) + 32 > textMaxWidth) {
+          return textMaxWidth + 'px'
+        }
+        return getWidth(value) + 32 + 'px'
+      }
+    }
+
+    const keyup = (ev) => {
+      if (ev.keyCode === 13) {
+        ev.target.blur()
+        this.handleEnter()
+      }
+    }
+
+    switch (item.type) {
+      case 'search':
+      case 'text':
+        elementDom = h(
+          'el-input',
+          {
+            attrs: {
+              style: {
+                width: calcTextWidth(item, form[item.value])
+              },
+              title: form[item.value],
+              ruleField: true,
+              'rule-form': 'ruleValidate',
+              ruleErrorHide: item.ruleErrorHide,
+              rules: item.rules,
+              readonly: item.type === 'search',
+              placeholder: item.props && item.props.placeholder ? item.props.placeholder : $lc('请输入'),
+              maxlength: item.props && item.props.maxlength,
+              minlength: item.props && item.props.minlength
+            },
+
+            directives: [
+              {
+                name: 'rule-key'
+              }
+            ],
+            props: {
+              clearable: (item.props && item.props.clearable) ?? true,
+              ...item.props
+            },
+            model: {
+              value: form[item.value],
+              callback: (value) => {
+                this.$set(form, item.value, value)
+                this.handleChange(value)
+              }
+            },
+            on: {
+              blur: this.handleBlur,
+              clear: this.handleClear,
+              ...item.on
+            },
+            nativeOn: {
+              keyup
+            }
+          },
+          item.type === 'search'
+            ? [
+                h('i', {
+                  slot: 'suffix',
+                  class: 'el-input__icon el-icon-zoom-in',
+                  on: {
+                    click: () => {
+                      if (item.on && item.on.focus) {
+                        item.on.focus()
+                      }
+                    }
+                  }
+                })
+              ]
+            : []
+        )
+        break
+      case 'select':
+        let selectOptions = null
+        if (item.props && item.props.labelKey && item.props.valueKey) {
+          selectOptions = item.options.map((c, i) => {
+            return h('el-option', {
+              key: i,
+              props: {
+                label: c[item.props.labelKey],
+                value: c[item.props.valueKey],
+                disabled: c.disabled
+              }
+            })
+          })
+        } else {
+          selectOptions = item.options.map((c, j) => {
+            return h('el-option', {
+              key: j,
+              props: {
+                label: c.label,
+                value: c.value,
+                disabled: c.disabled
+              }
+            })
+          })
+        }
+
+        const selectProps = {
+          placeholder: item.props && item.props.placeholder ? item.props.placeholder : $lc('请选择'),
+          clearable: (item.props && this.item.props.clearable) ?? true,
+          multiple: item.multiple || item.props?.multiple,
+          ...item.props
+        }
+        elementDom = h(
+          'el-select',
+          {
+            directives: [{ name: 'rule-key' }],
+            attrs: {
+              ruleField: true,
+              'rule-form': 'ruleValidate',
+              ruleErrorHide: item.ruleErrorHide,
+              rules: item.rules,
+              collapseTags: true
+            },
+            style: {
+              width: calcSelectWidth(item, form[item.value])
+            },
+            props: selectProps,
+
+            model: {
+              value: form[item.value],
+              callback: (value) => {
+                this.$set(form, item.value, value)
+                this.handleChange(value)
+              }
+            },
+            on: {
+              clear: this.handleClear,
+              'visible-change': this.handleVisibleChange,
+              ...item.on
+            }
+          },
+          selectOptions
+        )
+        break
+      case 'number':
+        const inputProps = {
+          value: form[this.item.value],
+          // 将 props 对象中的属性应用到 input 上
+          ...item.props
+        }
+        elementDom = h('inputNumber', {
+          directives: [{ name: 'rule-key' }],
+          ruleField: true,
+          attrs: {
+            'rule-form': 'ruleValidate',
+            title: form[item.value],
+            rules: item.rules,
+            ruleErrorHide: item.ruleErrorHide
+          },
+          style: {
+            width: calcWidth(form[item.value])
+          },
+          props: inputProps,
+          on: {
+            input: (value) => {
+              this.$set(form, item.value, value)
+              this.handleChange(value)
+            },
+            clear: this.handleClear,
+            blur: this.handleBlur,
+            ...item.on
+          },
+          nativeOn: {
+            keyup
+          }
+        })
+        break
+      case 'numberrange':
+        const inputRangeProps = {
+          startValue: form[item.startValue],
+          endValue: form[item.endValue],
+
+          // 将 props 对象中的属性应用到 inputRange 上
+          ...item.props
+        }
+        elementDom = h('InputNumberRange', {
+          directives: [{ name: 'rule-key', value: 'startValue' }],
+          attrs: {
+            ...item.props,
+            ruleField: true,
+            'rule-form': 'ruleValidate',
+            rules: item.rules,
+            isClearable: (item.props && item.props.isClearable) ?? true,
+            ruleErrorHide: item.ruleErrorHide
+          },
+          style: {
+            width: calcRangeWidth(item, form[item.startValue], form[item.endValue])
+          },
+          props: inputRangeProps,
+          on: {
+            'update:start-value': (value) => {
+              this.$set(form, item.startValue, value)
+              this.handleChange(value)
+            },
+            'update:end-value': (value) => {
+              this.$set(form, item.endValue, value)
+              this.handleChange(value)
+            },
+            clear: this.handleClear,
+            blur: this.handleBlur,
+            ...item.on
+          },
+          nativeOn: {
+            keyup
+          }
+        })
+        break
+      case 'date':
+      case 'datetime':
+      case 'year':
+      case 'month':
+      case 'week':
+        const datePickerProps = {
+          value: form[item.value],
+          type: item.type,
+          'prefix-icon': (item.props && item.props.prefixIcon) ?? '',
+          clearable: (item.props && item.props.clearable) ?? true,
+          // 将 props 对象中的属性应用到 datePicker 上
+          ...item.props
+        }
+        elementDom = h('el-date-picker', {
+          directives: [{ name: 'rule-key' }],
+          attrs: {
+            'rule-form': 'ruleValidate',
+            ruleField: true,
+            class: `n20-date-editor`,
+            'value-format': (item.props && item.props.valueFormat) ?? 'yyyy-MM-dd',
+            placeholder: (item.props && item.props.placeholder) ?? $lc('请选择'),
+            rules: item.rules,
+            ruleErrorHide: item.ruleErrorHide
+          },
+          style: {
+            width: calcDateWidth(item, form[item.value])
+          },
+          props: datePickerProps,
+          model: {
+            value: form[item.value],
+            callback: (value) => {
+              this.$set(form, item.value, value)
+            }
+          },
+          on: {
+            input: (value) => {
+              this.$set(form, item.value, value)
+              this.handleChange(value)
+            },
+            change: this.handleFilter,
+            clear: this.handleClear
+          }
+        })
+        break
+      case 'daterange':
+      case 'datetimerange':
+      case 'monthrange':
+        const pickerProps = {
+          type: item.type,
+          startDate: form[item.startDate] || null,
+          endDate: form[item.endDate] || null,
+          rules: item.rules,
+          clearable: (item.props && item.props.clearable) ?? true,
+          ...item.props
+        }
+        elementDom = h('datePickerPor', {
+          directives: [{ name: 'rule-key', value: 'startDate' }],
+          attrs: {
+            ruleField: true,
+            'rule-form': 'ruleValidate',
+            ruleErrorHide: item.ruleErrorHide,
+            rules: item.rules,
+            ...item.props
+          },
+          props: pickerProps,
+          style: {
+            width: calcRangeWidth(item, form[item.startDate], form[item.endDate])
+          },
+          on: {
+            'update:start-date': (val) => {
+              this.$set(form, item.startDate, val)
+              this.handleChange(val)
+            },
+            'update:end-date': (val) => {
+              this.$set(form, item.endDate, val)
+              this.handleChange(val)
+            },
+            clear: this.handleClear,
+            change: () => {
+              this.handleFilter()
+            }
+          },
+          nativeOn: {
+            keyup
+          }
+        })
+        break
+
+      case 'checkbox':
+        elementDom = h(
+          'el-checkbox-group',
+          {
+            directives: [{ name: 'rule-key' }],
+            attrs: {
+              'rule-form': 'ruleValidate',
+              ruleField: true,
+              rules: item.rules,
+              ruleErrorHide: item.ruleErrorHide
+            },
+            props: { ...item.props },
+            model: {
+              value: form[item.value],
+              callback: (value) => {
+                this.$set(form, item.value, value)
+                this.handleChange(value)
+              }
+            },
+            on: {
+              ...item.on
+            },
+            nativeOn: {
+              keyup
+            }
+          },
+          item.options.map((option) => {
+            return h(
+              'el-checkbox',
+              { key: option.value, props: { label: option.value, disabled: option.disabled } },
+              option.label
+            )
+          })
+        )
+        break
+      case 'radio':
+        elementDom = h(
+          'el-radio-group',
+          {
+            directives: [{ name: 'rule-key' }],
+            attrs: {
+              'rule-form': 'ruleValidate',
+              ruleField: true,
+              rules: item.rules,
+              ruleErrorHide: item.ruleErrorHide
+            },
+            props: { ...item.props },
+            model: {
+              value: form[item.value],
+              callback: (value) => {
+                this.$set(form, item.value, value)
+                this.handleChange(value)
+              }
+            },
+            on: {
+              ...item.on
+            },
+            nativeOn: {
+              keyup
+            }
+          },
+          item.options.map((option) => {
+            return h(
+              'el-radio',
+              { key: option.value, props: { label: option.value, disabled: option.disabled } },
+              option.label
+            )
+          })
+        )
+        break
+
+      case 'selectTree':
+        elementDom = h('selectTree', {
+          directives: [{ name: 'rule-key' }],
+          style: {
+            width: calcSelectTreeWidth(item, form[item.value])
+          },
+          attrs: {
+            ruleField: true,
+            'rule-form': 'ruleValidate',
+            rules: item.rules,
+            ruleErrorHide: item.ruleErrorHide,
+            collapseTags: true
+          },
+          props: {
+            data: item.options,
+            props: {
+              ...item.props.props
+            },
+            clearable: (item.props && item.props.clearable) ?? true,
+            ...item.props
+          },
+          model: {
+            value: form[item.value],
+            callback: (value) => {
+              this.$set(form, item.value, value)
+            }
+          },
+          on: {
+            clear: this.handleClear,
+            'visible-change': this.handleVisibleChange,
+            change: this.handleClear
+          },
+          nativeOn: {
+            keyup
+          }
+        })
+        break
+      case 'selectTreePro':
+        elementDom = h('selectTreePro', {
+          directives: [{ name: 'rule-key' }],
+          attrs: {
+            ruleField: true,
+            'rule-form': 'ruleValidate',
+            rules: item.rules,
+            ruleErrorHide: item.ruleErrorHide,
+            collapseTags: true,
+            clearable: (item.props && item.props.clearable) ?? true
+          },
+          style: {
+            width: calcSelectTreeWidth(item, form[item.value])
+          },
+          model: {
+            value: form[item.value],
+            callback: (value) => {
+              this.$set(form, item.value, value)
+            }
+          },
+          props: {
+            data: item.options,
+            'node-key': item.props['nodeKey' ?? 'node-key'],
+            defineProps: item.props.defineProps,
+
+            ...item.props
+          },
+          on: {
+            clear: this.handleClear,
+            'visible-change': this.handleVisibleChange
+          },
+          nativeOn: {
+            keyup
+          }
+        })
+        break
+      default:
+        elementDom = h('el-input', {
+          attrs: {
+            style: {
+              width: calcTextWidth(item.label, form[item.value])
+            },
+            ruleField: true,
+            'rule-form': 'ruleValidate',
+            rules: item.rules,
+            ruleErrorHide: item.ruleErrorHide,
+            placeholder: item.props && item.props.placeholder ? item.props.placeholder : $lc('请输入'),
+            maxlength: item.props && item.props.maxlength,
+            minlength: item.props && item.props.minlength
+          },
+          on: {
+            blur: this.handleBlur,
+            clear: this.handleClear
+          },
+          directives: [
+            {
+              name: 'rule-key'
+            }
+          ],
+          props: {
+            rules: item.rules,
+            clearable: (item.props && item.props.clearable) ?? true
+          },
+          domProps: {
+            value: form[item.value]
+          },
+          model: {
+            value: form[item.value],
+            callback: (value) => {
+              this.$set(form, item.value, value)
+            }
+          },
+          nativeOn: {
+            input: (event) => {
+              form[item.value] = event.target.value
+            },
+            keyup
+          }
+        })
+        break
+    }
+
+    return elementDom
+  }
+}
+</script>