n20-common-lib 2.6.44 → 2.6.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "n20-common-lib",
-  "version": "2.6.44",
+  "version": "2.6.46",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/assets/css/filter.scss

@@ -68,6 +68,10 @@
       max-width: 380px;
     }
 
+    .n20-date-editor .el-input__prefix {
+      display: none;
+    }
+
     .el-input,
     .el-input__inner {
       border: none;

package/src/components/AdvancedFilter/formItemRender.vue

@@ -120,25 +120,40 @@ export default {
 
     const calcWidth = (value, type) => {
       let W = null
-      if (!value) {
-        if (type) {
-          return Number(w) + 110 + 'px'
+      if (!Array.isArray(value)) {
+        if (!value) {
+          if (type) {
+            return Number(w) + 110 + 'px'
+          }
+          return w + 'px'
         }
-        return w + 'px'
-      }
-      if (getWidth(value, type) > w) {
-        if (getWidth(value, type) > MAX_WIDTH) {
-          W = MAX_WIDTH
+        if (getWidth(value, type) > w) {
+          if (getWidth(value, type) > MAX_WIDTH) {
+            W = MAX_WIDTH
+          } else {
+            W = getWidth(value, type)
+          }
         } else {
-          W = getWidth(value, type)
+          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 (type) {
-          W = w ? w : asciiWidth(item.placeholder || typeEnum[item.type]) + 150
-        } else {
-          W = w ? w : asciiWidth(item.placeholder || typeEnum[item.type]) + 40
+        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'
     }
 
@@ -341,7 +356,7 @@ export default {
             ruleErrorHide: item.ruleErrorHide
           },
           style: {
-            width: calcWidth(form[item.startValue], true)
+            width: calcWidth([form[item.startValue], form[item.endValue]], true)
           },
           props: inputRangeProps,
           on: {
@@ -368,13 +383,22 @@ 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])
           },
@@ -399,29 +423,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)
           },
           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()
             }
           },

package/src/components/AdvancedFilter/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="prefixCls">
-    <el-form ref="advancedFilter" v-if="visible" :class="prefixCls + '-body'">
+    <el-form ref="advancedFilter" v-show="visible" :class="prefixCls + '-body'">
       <slot name="prefix"></slot>
       <el-form-item
         v-for="item in GroupData"
@@ -23,7 +23,7 @@
           />
         </div>
         <i
-          v-if="!item.isDefault"
+          v-if="!item.isNotClose"
           :key="getOnlyKey(item)"
           :class="[prefixCls + '-item-close', 'n20-icon-yichu']"
           @click="handleClose(item)"
@@ -67,6 +67,10 @@ export default {
     filterItem
   },
   props: {
+    isNotClose: {
+      type: Boolean,
+      default: false
+    },
     visible: {
       type: Boolean,
       default: false
@@ -161,7 +165,13 @@ export default {
       let flag = ''
       switch (item.type) {
         case 'numberrange':
-          flag = this.model[item.startValue] && this.model[item.endValue] ? this.prefixCls + '-active' : ''
+          flag =
+            this.model[item.startValue] !== null &&
+            this.model[item.endValue] !== null &&
+            this.model[item.startValue] !== undefined &&
+            this.model[item.endValue] !== undefined
+              ? this.prefixCls + '-active'
+              : ''
           break
         case 'daterange':
         case 'datetimerange':
@@ -223,7 +233,27 @@ export default {
     cleared() {
       this.$emit('clear')
     },
-
+    setModelData(list) {
+      let arr = []
+      list.forEach((res) => {
+        if (res.value) {
+          arr.push(res.value)
+        } else if (res.startDate && res.endDate) {
+          arr.push(res.startDate)
+          arr.push(res.endDate)
+        } else if (res.startValue && res.endValue) {
+          arr.push(res.startValue)
+          arr.push(res.endValue)
+        }
+      })
+      for (const key in this.model) {
+        if (Object.hasOwnProperty.call(this.model, key)) {
+          if (!arr.includes(key)) {
+            delete this.model[key]
+          }
+        }
+      }
+    },
     check: _debounce(function (keys) {
       // 保存当前选择的过滤条件
       this.checkList = keys
@@ -236,6 +266,7 @@ export default {
           }
         })
       }
+      this.setModelData(saveCheckArr)
       this.saveFilter(saveCheckArr).then(({ code }) => {
         // 如果保存成功
         if (code === 200) {
@@ -244,7 +275,6 @@ export default {
         }
       })
       this.$emit('check')
-      // // 保存过滤条件
     }, 1000),
     /**
      * 保存筛选条件

package/src/directives/VRuleKey/index.js

@@ -119,7 +119,7 @@ directive.install = (Vue) => {
       // 表单验证
       el[VALIDATE] = async (type) => {
         let _value = _this[binding.value || 'value']
-
+        console.log(_this.$attrs)
         let _rules = getRules(_this.$attrs['rules'], type)
 
         if (_rules.length > 0) {