n20-common-lib 2.7.0-beta.18 → 2.7.0-beta.19

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: {
@@ -80,7 +82,7 @@ export default {
   },
   render(h) {
     const { item, form, context } = this
-    const MAX_WIDTH = 312
+
     let elementDom = null
 
     let typeEnum = (type) => {
@@ -106,24 +108,58 @@ export default {
       }
     }
 
-    let w = asciiWidth(item.placeholder || typeEnum(item.type)) + 34
-    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) => {
+    // 计算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) + 104 + 'px'
+            return Number(w) + 110 + 'px'
           }
           return w + 'px'
         }
@@ -156,29 +192,147 @@ export default {
 
       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)
+        }
+      })
 
-    const calcSelectWidth = (value, type) => {
-      let W = null
-      if (!value) {
-        return w + 'px'
+      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 {
-        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?.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 {
-            if (type) {
-              W = width + 45
-            } else {
-              W = width
-            }
+            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 || 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 {
-          W = w
+          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 {
+            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 {
+          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) => {
@@ -196,7 +350,7 @@ export default {
           {
             attrs: {
               style: {
-                width:calcWidth(form[item.value])
+                width: calcTextWidth(item, form[item.value])
               },
               ruleField: true,
               'rule-form': 'ruleValidate',
@@ -291,7 +445,7 @@ export default {
               collapseTags: true
             },
             style: {
-              width: calcSelectWidth(form[item.value], item.multiple)
+              width: calcSelectWidth(item, form[item.value])
             },
             props: selectProps,
 
@@ -356,7 +510,7 @@ export default {
             ruleErrorHide: item.ruleErrorHide
           },
           style: {
-            width: calcWidth([form[item.startValue], form[item.endValue]], true)
+            width: calcRangeWidth(item, form[item.startValue], form[item.endValue])
           },
           props: inputRangeProps,
           on: {
@@ -400,7 +554,7 @@ export default {
             ruleErrorHide: item.ruleErrorHide
           },
           style: {
-            width: calcWidth(form[item.value])
+            width: calcDateWidth(item, form[item.value])
           },
           props: datePickerProps,
           model: {
@@ -439,7 +593,7 @@ export default {
           },
           props: pickerProps,
           style: {
-            width: calcWidth(form[item.startDate], true)
+            width: calcRangeWidth(item, form[item.startDate], form[item.endDate])
           },
           on: {
             'update:start-date': (val) => {
@@ -532,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,
@@ -577,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],
@@ -605,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',

package/src/components/AdvancedFilter/index.vue

@@ -1,15 +1,16 @@
 <template>
   <div :class="prefixCls">
-    <div ref="advancedFilter" v-show="visible" :class="prefixCls + '-body'">
+    <el-form ref="advancedFilter" v-show="visible" :class="prefixCls + '-body'">
       <slot name="prefix"></slot>
-      <FormItem
+      <el-form-item
         v-for="item in GroupData"
         :key="getOnlyKey(item)"
-        :class="[activeClass(item)]"
+        :class="[prefixCls + '-item', activeClass(item)]"
         :label="item.label"
-        :required="item.required !== undefined || true ? item.required : false"
+        :required="item.required !== undefined || item.required !== null ? item.required : false"
         :disabled="item.props && item.props.disabled"
       >
+        <div :class="prefixCls + '-content'">
           <slot v-if="item.slotName" :name="item.slotName"></slot>
           <formItemRender
             v-else
@@ -20,36 +21,48 @@
             @enter="$emit('enter')"
             @filter="$emit('filter', model)"
           />
-<!--        <i
+        </div>
+        <i
           v-if="!item.isNotClose"
           :key="getOnlyKey(item)"
-          :class="[prefixCls + '-item-close', 'n20-icon-yichu']"
+          :class="['filter_remove', 'n20-icon-yichu']"
           @click="handleClose(item)"
-        ></i>-->
-      </FormItem>
+        ></i>
+      </el-form-item>
       <slot name="suffix"></slot>
-      <div :class="prefixCls + '-add'">
+      <el-form-item :class="prefixCls + '-add'">
         <el-button v-popover:advanced_popover onlyicon plain icon="el-icon-plus" />
         <el-popover ref="advanced_popover" placement="bottom-start" trigger="click">
           <el-input v-model="keyword" clearable class="input-w m-b-s" :placeholder="$lc('搜索筛选条件')" />
-          <filterItem :filter-list="filterListS" :check-array.sync="checkList" @checked="check" />
+          <div class="flex-box flex-lr">
+            <el-button type="text" @click="allCheck">全选</el-button>
+            <el-button type="text" @click="defaultCheck"> 恢复默认</el-button>
+          </div>
+          <filterItem
+            :filter-list="filterListS"
+            :maxLength="maxLength"
+            :check-array.sync="checkList"
+            @checked="check"
+          />
+          <div class="flex-box flex-c m-t-m">
+            <el-button size="mini" type="primary" @click="savaCheck">确认</el-button>
+            <el-button plain type="primary" @click="cancel">取消</el-button>
+          </div>
         </el-popover>
-        <el-link class="m-l-s f-s-s color-primary" :underline="false" icon="n20-icon-query" @click="$emit('search')">
+        <el-link class="m-l-s color-primary" :underline="false" icon="n20-icon-query" @click="$emit('search')">
           {{ '查询' | $lc }}</el-link
         >
-        <el-link class="m-l-s f-s-s" :underline="false" icon="n20-icon-qingchu" @click="cleared">
-          {{ '清空' | $lc }}</el-link
-        >
-      </div>
-    </div>
+        <el-link class="m-l-s" :underline="false" icon="n20-icon-qingchu" @click="cleared"> {{ '清空' | $lc }}</el-link>
+      </el-form-item>
+    </el-form>
   </div>
 </template>
 
 <script>
+// import formItemInput from './form-item-input.vue'
 import formItemRender from './formItemRender.vue'
 import InputSearch from '../InputSearch/index.vue'
 import filterItem from './filterItem.vue'
-import FormItem from './FormItem.vue'
 import axios from '../../utils/axios.js'
 import { $lc } from '../../utils/i18n/index.js'
 import cloneDeep from 'lodash/cloneDeep'
@@ -62,14 +75,27 @@ export default {
     // formItemInput,
     formItemRender,
     InputSearch,
-    filterItem,
-    FormItem
+    // FormItem,
+    filterItem
+  },
+  provide() {
+    return {
+      prefixCls,
+      nFilter: this
+    }
   },
   props: {
     isNotClose: {
       type: Boolean,
       default: false
     },
+    maxLength: {
+      type: Number
+    },
+    removeLoad: {
+      type: Boolean,
+      default: true
+    },
     visible: {
       type: Boolean,
       default: false
@@ -98,7 +124,7 @@ export default {
       remoteList: [],
       GroupData: [],
       checkList: [],
-      checkC: [],
+      defineCheckList: [],
       userNo: sessionStorage.getItem('userNo')
     }
   },
@@ -253,14 +279,27 @@ export default {
         }
       }
     },
-    check: _debounce(function (keys) {
-      // 保存当前选择的过滤条件
-      this.checkList = keys
+    allCheck() {
+      if (this.maxLength) {
+        this.checkList = this.filterListS.slice(0, this.maxLength)?.map((res) => res[this.onlyKey])
+        console.log(this.checkList, this.filterListS)
+      } else {
+        this.checkList = this.filterListS?.map((res) => res[this.onlyKey])
+      }
+    },
+    defaultCheck() {
+      this.checkList = this.defineCheckList
+    },
+    cancel() {
+      this.checkList = this.defineCheckList
+      this.$refs.advanced_popover.showPopper = false
+    },
+    savaCheck() {
       let saveCheckArr = []
       // 如果keys数组不为空
-      if (keys.length > 0) {
+      if (this.checkList.length > 0) {
         this.filterList.forEach((item) => {
-          if (keys.includes(item.id)) {
+          if (this.checkList.includes(item[this.onlyKey])) {
             saveCheckArr.push(item)
           }
         })
@@ -273,8 +312,12 @@ export default {
           this.getFilterList()
         }
       })
+      this.$refs.advanced_popover.showPopper = false
       this.$emit('check')
-    }, 1000),
+    },
+    check(keys) {
+      this.checkList = keys
+    },
     /**
      * 保存筛选条件
      * @param data
@@ -315,7 +358,7 @@ export default {
             this.GroupData = _data.map((item) => {
               for (let i = 0; i < this.filterList.length; i++) {
                 const originItem = this.filterList[i]
-                if (originItem.id === item.id) {
+                if (originItem[this.onlyKey] === item[this.onlyKey]) {
                   item.label = originItem.label
                   if (item.options && originItem.options) {
                     item.options = originItem.options
@@ -325,14 +368,28 @@ export default {
               return item
             })
           } else {
-            this.GroupData = this.filterList.filter((item) => {
-              if (item.isDefault) {
-                return item
-              }
-            })
+            if (this.removeLoad) {
+              this.GroupData = this.filterList.filter((item) => {
+                if (item.isDefault) {
+                  return item
+                }
+              })
+            } else {
+              this.GroupData = []
+            }
           }
           this.checkList = this.GroupData.map((res) => res.id)
-          this.checkC = cloneDeep(this.checkList)
+          this.defineCheckList = cloneDeep(this.checkList)
+          // 查找排序，在this.filterList中查找this.checkList中的每一项，并将其排在前面
+          this.filterList = this.filterList.sort((a, b) => {
+            if (this.checkList.includes(a[this.onlyKey]) && !this.checkList.includes(b[this.onlyKey])) {
+              return -1
+            }
+            if (!this.checkList.includes(a[this.onlyKey]) && this.checkList.includes(b[this.onlyKey])) {
+              return 1
+            }
+            return 0
+          })
         })
         .finally(() => {
           for (const key in getOptionsMap()) {

package/src/components/AdvancedFilter/main/Form/form-item.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="n20-form-item">
+    <label class="n20-form-item__label">{{ label }}</label>
+    <div class="n20-form-item__value">
+      <slot></slot>
+    </div>
+    <i class="filter_remove n20-icon-yichu"></i>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'FormItem',
+  inject: ['Form'],
+  props: {
+    label: {
+      type: String,
+      default: ''
+    },
+    item: {
+      type: Object
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.n20-form-item {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  max-width: 426px;
+  height: 32px;
+  line-height: 32px;
+  margin-right: 8px;
+  margin-bottom: 8px;
+  padding-left: 8px;
+  border-radius: 4px;
+  border: 1px solid #dcdfe5;
+  background: #fff;
+  cursor: pointer;
+  &__label {
+    display: inline-block;
+    vertical-align: middle;
+    white-space: nowrap;
+    overflow: hidden;
+    max-width: 168px;
+    margin-right: 6px;
+    color: #182b50;
+  }
+  &__value {
+    display: inline-block;
+    vertical-align: middle;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    .el-input .el-input__inner {
+      border: none;
+      padding-left: 0;
+      background-color: transparent;
+    }
+
+    .el-input__inner:focus {
+      box-shadow: none;
+    }
+  }
+  .filter_remove {
+    display: none;
+    position: absolute;
+    height: 13px;
+    width: 13px;
+    background: #f1f1f1;
+    right: -5px;
+    top: -7px;
+    font-size: 14px;
+    z-index: 1;
+    border-radius: 50%;
+    cursor: pointer;
+  }
+
+  &:hover {
+    .filter_remove {
+      display: block;
+    }
+  }
+}
+</style>

package/src/components/AdvancedFilter/main/Form/form.vue

@@ -0,0 +1,59 @@
+<template>
+  <form class="n20-form">
+    <FormItem v-for="(item, i) in list" :key="i" :label="item.label" :item="item">
+      <slot v-if="item.slotName" :name="item.slotName"></slot>
+      <FormItemRender
+        v-else
+        :key="i"
+        :form="model"
+        :item="item"
+        @blur="$emit('blur')"
+        @clean="$emit('clean')"
+        @enter="$emit('enter')"
+        @filter="$emit('filter', model)"
+      ></FormItemRender>
+    </FormItem>
+  </form>
+</template>
+
+<script>
+import FormItem from './form-item.vue'
+import FormItemRender from '../../formItemRender.vue'
+export default {
+  name: 'Form',
+  components: {
+    FormItem,
+    FormItemRender
+  },
+  props: {
+    model: {
+      type: Object,
+      default: () => ({})
+    },
+    rules: {
+      type: Object,
+      default: () => ({})
+    },
+    list: {
+      type: Array,
+      default: () => []
+    }
+  },
+  provide() {
+    return {
+      Form: this
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.n20-form {
+  box-sizing: border-box;
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  padding: 8px 0;
+}
+</style>