n20-common-lib 2.7.0-beta.2 → 2.7.0-beta.21

package/src/assets/iconFont/iconfont.json

@@ -5,6 +5,202 @@
   "css_prefix_text": "n20-icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "39632933",
+      "name": "语言切换",
+      "font_class": "yuyanqiehuan",
+      "unicode": "e62f",
+      "unicode_decimal": 58927
+    },
+    {
+      "icon_id": "39546292",
+      "name": "arrows",
+      "font_class": "lujing",
+      "unicode": "e62e",
+      "unicode_decimal": 58926
+    },
+    {
+      "icon_id": "39545500",
+      "name": "menu",
+      "font_class": "caidan",
+      "unicode": "e61e",
+      "unicode_decimal": 58910
+    },
+    {
+      "icon_id": "39545088",
+      "name": "jtskywgk",
+      "font_class": "a-bianzu701",
+      "unicode": "e613",
+      "unicode_decimal": 58899
+    },
+    {
+      "icon_id": "39545089",
+      "name": "cszhyw",
+      "font_class": "zhcsyw",
+      "unicode": "e614",
+      "unicode_decimal": 58900
+    },
+    {
+      "icon_id": "39545090",
+      "name": "jrwg",
+      "font_class": "a-bianzu1",
+      "unicode": "e615",
+      "unicode_decimal": 58901
+    },
+    {
+      "icon_id": "39545091",
+      "name": "csywgl",
+      "font_class": "bianzu",
+      "unicode": "e616",
+      "unicode_decimal": 58902
+    },
+    {
+      "icon_id": "39545092",
+      "name": "cszlpt",
+      "font_class": "a-bianzu3",
+      "unicode": "e617",
+      "unicode_decimal": 58903
+    },
+    {
+      "icon_id": "39545093",
+      "name": "cswy",
+      "font_class": "a-bianzu69",
+      "unicode": "e618",
+      "unicode_decimal": 58904
+    },
+    {
+      "icon_id": "39545094",
+      "name": "jtsjfx",
+      "font_class": "a-bianzu2",
+      "unicode": "e619",
+      "unicode_decimal": 58905
+    },
+    {
+      "icon_id": "39545095",
+      "name": "csfzjc",
+      "font_class": "a-bianzu70",
+      "unicode": "e61a",
+      "unicode_decimal": 58906
+    },
+    {
+      "icon_id": "39130753",
+      "name": "query",
+      "font_class": "query",
+      "unicode": "e612",
+      "unicode_decimal": 58898
+    },
+    {
+      "icon_id": "38017865",
+      "name": "风控管理",
+      "font_class": "fengkongguanli",
+      "unicode": "e611",
+      "unicode_decimal": 58897
+    },
+    {
+      "icon_id": "37668679",
+      "name": "清除",
+      "font_class": "qingchu",
+      "unicode": "e610",
+      "unicode_decimal": 58896
+    },
+    {
+      "icon_id": "37667394",
+      "name": "移除",
+      "font_class": "yichu",
+      "unicode": "e60f",
+      "unicode_decimal": 58895
+    },
+    {
+      "icon_id": "37355986",
+      "name": "增加 copy",
+      "font_class": "a-zengjiacopy",
+      "unicode": "e62d",
+      "unicode_decimal": 58925
+    },
+    {
+      "icon_id": "37315078",
+      "name": "图钉",
+      "font_class": "tuding",
+      "unicode": "e60c",
+      "unicode_decimal": 58892
+    },
+    {
+      "icon_id": "35627211",
+      "name": "出口",
+      "font_class": "chukou",
+      "unicode": "e621",
+      "unicode_decimal": 58913
+    },
+    {
+      "icon_id": "35627212",
+      "name": "步骤",
+      "font_class": "buzhou",
+      "unicode": "e622",
+      "unicode_decimal": 58914
+    },
+    {
+      "icon_id": "35627213",
+      "name": "撤销",
+      "font_class": "chexiao",
+      "unicode": "e623",
+      "unicode_decimal": 58915
+    },
+    {
+      "icon_id": "35627214",
+      "name": "并行网关",
+      "font_class": "binghangwangguan",
+      "unicode": "e624",
+      "unicode_decimal": 58916
+    },
+    {
+      "icon_id": "35627215",
+      "name": "保存",
+      "font_class": "baocun",
+      "unicode": "e626",
+      "unicode_decimal": 58918
+    },
+    {
+      "icon_id": "35627216",
+      "name": "框选",
+      "font_class": "kuangxuan",
+      "unicode": "e627",
+      "unicode_decimal": 58919
+    },
+    {
+      "icon_id": "35627217",
+      "name": "分支网关",
+      "font_class": "fenzhiwangguan",
+      "unicode": "e628",
+      "unicode_decimal": 58920
+    },
+    {
+      "icon_id": "35627218",
+      "name": "预览",
+      "font_class": "yulan",
+      "unicode": "e629",
+      "unicode_decimal": 58921
+    },
+    {
+      "icon_id": "35627219",
+      "name": "入口",
+      "font_class": "rukou",
+      "unicode": "e62a",
+      "unicode_decimal": 58922
+    },
+    {
+      "icon_id": "35627220",
+      "name": "合并网关",
+      "font_class": "hebingwangguan",
+      "unicode": "e62b",
+      "unicode_decimal": 58923
+    },
+    {
+      "icon_id": "35627221",
+      "name": "恢复",
+      "font_class": "huifu",
+      "unicode": "e62c",
+      "unicode_decimal": 58924
+    },
     {
       "icon_id": "34742144",
       "name": "收起折叠（去边框）",

package/src/assets/realUrl.js

@@ -6,7 +6,7 @@ export default function realUrl(url, rest = false) {
     return url
   } else if (/^\//.test(url)) {
     return prefix + url.replace(/^\//, '')
-  } else if (!rest) {
+  } else if (rest) {
     return '/' + url
   } else {
     return url

package/src/components/AdvancedFilter/filterItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-checkbox-group v-model="checkArrayCalc" class="popover-check-box" @change="checkChange">
+  <el-checkbox-group v-model="checkArrayCalc" :max="maxLength" class="popover-check-box" @change="checkChange">
     <vue-draggable
       :list="filterList"
       :animation="200"
@@ -30,6 +30,9 @@ export default {
     checkArray: {
       type: Array,
       default: () => []
+    },
+    maxLength: {
+      type: Number
     }
   },
   computed: {
@@ -48,6 +51,9 @@ export default {
   },
   methods: {
     checkChange(keys) {
+      if (keys.length > this.maxLength) {
+        return this.$message.warning(`最多只能添加${this.maxLength}个筛选条件!`)
+      }
       this.$emit('checked', keys)
     },
     dragChange() {

package/src/components/AdvancedFilter/formItemRender.vue

@@ -1,14 +1,16 @@
 <script>
+import asciiWidth from '../../utils/asciiWidth'
 import axios from '../../utils/axios'
+import forEachs from '../../utils/forEachs'
+import { $lc } from '../../utils/i18n/index.js'
+import datePickerPor from '../DatePicker/por.vue'
 import inputNumber from '../InputNumber/index.vue'
 import InputNumberRange from '../InputNumber/numberRange.vue'
-import datePickerPor from '../DatePicker/por.vue'
 import selectTree from '../SelectTree/index.vue'
 import selectTreePro from '../SelectTree/pro.vue'
-import { $lc } from '../../utils/i18n/index.js'
-import asciiWidth from '../../utils/asciiWidth'
 const canvas = document.createElement('canvas')
 const context = canvas.getContext('2d')
+context.font = '14px Ping Fang SC'
 export default {
   name: 'formItemRender',
   components: {
@@ -49,6 +51,9 @@ export default {
     handleFilter() {
       this.$emit('filter')
     },
+    handleEnter() {
+      this.$emit('enter')
+    },
     handleVisibleChange(value) {
       if (!value) {
         this.handleFilter()
@@ -77,7 +82,7 @@ export default {
   },
   render(h) {
     const { item, form, context } = this
-    const MAX_WIDTH = 335
+
     let elementDom = null
 
     let typeEnum = (type) => {
@@ -103,70 +108,237 @@ export default {
       }
     }
 
-    let w = asciiWidth(item.placeholder || typeEnum(item.type)) + 40
-    if (/px$/.test(item.width)) {
-      w = item.width.replace(/px$/, '')
+    // 获取文本宽度
+    const getWidth = (label, type) => {
+      if (!label) {
+        return 0
+      }
+      if (!type) {
+        return context.measureText(label).width
+      }
+      return (context.measureText(label).width * 1.4 + 100) * 2
     }
 
-    const getWidth = (value, type) => {
-      if (!type) {
-        return context.measureText(value).width * 1.4 + 55
+    let w = 76
+    if (item.placeholder) {
+      w = asciiWidth(item.placeholder || typeEnum(item.type)) + 34
+      if (/px$/.test(item.width)) {
+        w = item.width.replace(/px$/, '')
       }
-      return (context.measureText(value).width * 1.4 + 100) * 2
     }
 
-    const calcWidth = (value, type) => {
-      let W = null
+    // 计算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) {
-        if (type) {
+        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 ? w : asciiWidth(item.placeholder || typeEnum[item.type]) + 150
+          } else {
+            W = w ? w : asciiWidth(item.placeholder || typeEnum[item.type]) + 40
+          }
+        }
+      } else {
+        if (!value[0] && !value[1]) {
           return Number(w) + 110 + 'px'
         }
-        return w + 'px'
+        let widthMax = getWidth(value[0]) + getWidth(value[1]) + 35
+        if (widthMax > w) {
+          if (widthMax > MAX_WIDTH) {
+            W = MAX_WIDTH
+          } else {
+            W = widthMax
+          }
+        }
       }
-      if (getWidth(value, type) > w) {
-        if (getWidth(value, type) > MAX_WIDTH) {
-          W = MAX_WIDTH
+
+      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 {
-          W = getWidth(value, type)
+          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 (type) {
-          W = w ? w : asciiWidth(item.placeholder || typeEnum[item.type]) + 150
+        if (!value?.length) {
+          return textMinWidth + 'px'
         } else {
-          W = w ? w : asciiWidth(item.placeholder || typeEnum[item.type]) + 40
+          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'
+          }
         }
       }
-      return W + 'px'
     }
-
-    const calcSelectWidth = (value, type) => {
-      let W = null
-      if (!value) {
-        return w + 'px'
+    // 计算select内容宽度
+    const calcSelectWidth = (item, value) => {
+      let textMaxWidth = 426 - getWidth(item.label) - 16
+      let textMinWidth = 76
+      const multiple = item.props?.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 {
-        let label = item.options.find((res) => (res.value || res[item.props.valueKey]) === value)?.label
-        const width = getWidth(label)
-        if (width > w) {
-          if (width > MAX_WIDTH) {
-            W = MAX_WIDTH
+        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) + 110 + 'px'
           } else {
-            if (type) {
-              W = width + 45
-            } else {
-              W = width
-            }
+            return getWidth(selectedName) + 32 < textMinWidth ? textMinWidth + 'px' : getWidth(selectedName) + 84 + 'px'
+          }
+        }
+      }
+    }
+    // 计算区间内容宽度
+    const calcRangeWidth = (item, value, value2) => {
+      let textMaxWidth = 284 - getWidth(item.label) - 16
+      let textMinWidth = 160
+      if (!value && !value2) {
+        return textMinWidth + 'px'
+      } else {
+        console.log(value, value2, getWidth(value))
+        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 {
-          W = w
+          let widthMax = getWidth(value) + getWidth(value2) + 140
+          if (widthMax < textMinWidth) {
+            return textMinWidth + 'px'
+          }
+          if (widthMax > textMaxWidth) {
+            return textMaxWidth + 'px'
+          }
+          return widthMax + 'px'
         }
       }
-      return W + 'px'
+    }
+
+    const calcDateWidth = (item, value) => {
+      let textMaxWidth = 282 - 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.handleFilter()
+        this.handleEnter()
       }
     }
 
@@ -178,7 +350,7 @@ export default {
           {
             attrs: {
               style: {
-                width: calcWidth(form[item.value])
+                width: calcTextWidth(item, form[item.value])
               },
               ruleField: true,
               'rule-form': 'ruleValidate',
@@ -273,7 +445,7 @@ export default {
               collapseTags: true
             },
             style: {
-              width: calcSelectWidth(form[item.value], item.multiple)
+              width: calcSelectWidth(item, form[item.value])
             },
             props: selectProps,
 
@@ -338,7 +510,7 @@ export default {
             ruleErrorHide: item.ruleErrorHide
           },
           style: {
-            width: calcWidth(form[item.startValue], true)
+            width: calcRangeWidth(item, form[item.startValue], form[item.endValue])
           },
           props: inputRangeProps,
           on: {
@@ -365,15 +537,24 @@ export default {
         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('datePickerPor', {
+        elementDom = h('el-date-picker', {
           directives: [{ name: 'rule-key' }],
-          attrs: { 'rule-form': 'ruleValidate', ruleField: true, rules: item.rules, ruleErrorHide: item.ruleErrorHide },
+          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: calcWidth(form[item.value])
+            width: calcDateWidth(item, form[item.value])
           },
           props: datePickerProps,
           model: {
@@ -396,29 +577,33 @@ export default {
       case 'monthrange':
         const pickerProps = {
           type: item.type,
-          startDate: form[item.startDate],
-          endDate: form[item.endDate],
+          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: { 'rule-form': 'ruleValidate', ruleField: true, rules: item.rules, ruleErrorHide: item.ruleErrorHide },
+          attrs: {
+            ruleField: true,
+            'rule-form': 'ruleValidate',
+            ruleErrorHide: item.ruleErrorHide,
+            rules: item.rules
+          },
           props: pickerProps,
           style: {
-            width: calcWidth(form[item.startDate], true)
+            width: calcRangeWidth(item, form[item.startDate], form[item.endDate])
           },
           on: {
+            'update:start-date': (val) => {
+              this.$set(form, item.startDate, val)
+            },
+            'update:end-date': (val) => {
+              this.$set(form, item.endDate, val)
+            },
             clear: this.handleClear,
-            change: (value) => {
-              if (value) {
-                this.$set(form, item.startDate, value[0])
-                this.$set(form, item.endDate, value[1])
-              } else {
-                this.$set(form, item.startDate, null)
-                this.$set(form, item.endDate, null)
-              }
+            change: () => {
               this.handleFilter()
             }
           },
@@ -501,7 +686,7 @@ export default {
         elementDom = h('selectTree', {
           directives: [{ name: 'rule-key' }],
           style: {
-            width: calcSelectWidth(form[item.value])
+            width: calcSelectTreeWidth(item, form[item.value])
           },
           attrs: {
             ruleField: true,
@@ -546,7 +731,7 @@ export default {
             clearable: (item.props && item.props.clearable) ?? true
           },
           style: {
-            width: item.width || '200px'
+            width: calcSelectTreeWidth(item, form[item.value])
           },
           model: {
             value: form[item.value],
@@ -574,7 +759,7 @@ export default {
         elementDom = h('el-input', {
           attrs: {
             style: {
-              width: item.width || '224px'
+              width: calcTextWidth(item.label, form[item.value])
             },
             ruleField: true,
             'rule-form': 'ruleValidate',