n20-common-lib 2.5.5-beta.7 → 2.5.5-beta.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "n20-common-lib",
-  "version": "2.5.5-beta.7",
+  "version": "2.5.5-beta.8",
   "private": false,
   "main": "src/index.js",
   "scripts": {

package/src/assets/css/cl-form-item.scss

@@ -1,7 +1,7 @@
 $--s: 1024px;
 $--m: 1600px;
 $--l: 1920px;
-$--input-max: 300px;
+$--input-max: 224px;
 
 .el-form-item[span],
 .el-form-item[span-s],
@@ -30,6 +30,7 @@ $--input-max: 300px;
 
 @media only screen and (max-width: $--l) {
   @for $i from 0 through 24 {
+
     .el-form-item[span-l='#{$i}'],
     .el-form-item[span-lg='#{$i}'] {
       width: (1 / 24 * $i * 100) * 1%;
@@ -108,10 +109,12 @@ $--input-max: 300px;
 .el-textarea__inner {
   padding-left: 10px;
   padding-right: 10px;
+
   &[oreadonly] {
     border-color: $--border-color-base;
   }
 }
+
 .el-input-number.is-without-controls .el-input__inner {
   padding-left: 10px;
   padding-right: 10px;
@@ -563,12 +566,14 @@ $--input-max: 300px;
     font-size: 16px;
     transition: all 0.3s;
   }
+
   &.has-value {
     &:hover {
       .el-range__icon {
         display: none;
       }
     }
+
     &.is-disabled {
       .el-range__icon {
         display: initial;
@@ -676,6 +681,7 @@ $--input-max: 300px;
   .el-input__suffix {
     font-size: 14px;
   }
+
   .el-icon-circle-close {
     pointer-events: all;
     cursor: pointer;
@@ -694,10 +700,12 @@ $--input-max: 300px;
     .el-select__input {
       margin-left: 10px;
     }
+
     .el-input__suffix {
       display: none;
     }
   }
+
   &.is-clearable {
     .el-select {
       .el-input__inner {
@@ -705,6 +713,7 @@ $--input-max: 300px;
       }
     }
   }
+
   .el-input__suffix {
     z-index: 1;
   }
@@ -728,6 +737,7 @@ $--input-max: 300px;
 /* 脱离form-item校验 */
 .rule-key__is-error {
   position: relative;
+
   .el-input__inner,
   .el-input__inner:focus,
   .el-textarea__inner,
@@ -735,6 +745,7 @@ $--input-max: 300px;
     border-color: $--color-danger;
   }
 }
+
 .rule-key__error_msg {
   color: $--color-danger;
   font-size: 12px;
@@ -750,8 +761,9 @@ $--input-max: 300px;
 }
 
 .n20-approval-Button {
+
   .el-form-item--small .el-form-item__content,
   .el-form-item--small .el-form-item__label {
     line-height: 1.5;
   }
-}
+}

package/src/assets/css/el-table.scss

@@ -167,6 +167,12 @@ th.vxe-header--column {
   font-family: PingFang SC, Microsoft YaHei, Arial, sans-serif !important;
   color: #333;
 }
+
+.vxe-header--column {
+  .vxe-cell {
+    justify-content: center !important;
+  }
+}
 @import '../../components/TableSetSize/style.scss';
 .el-table-set-size-item {
   .icon-mini {

package/src/assets/css/filter.scss

@@ -9,15 +9,19 @@
   align-items: center;
   flex: 1;
   padding: 8px;
+
   &-item.n20-advanced-filter-active {
     border-color: #b3d0ff;
     background: #e9f2ff !important;
   }
+
   &-body {
+
     .el-form-item,
     .el-form-item--small.el-form-item {
       margin-bottom: 10px;
     }
+
     .el-form-item__content {
       display: inline-block;
       vertical-align: middle;
@@ -38,6 +42,7 @@
     border-radius: 4px;
     white-space: nowrap;
     cursor: pointer;
+
     .el-form-item__label {
       padding: 0;
       display: inline-block;
@@ -51,9 +56,11 @@
     .n20-date-editor.el-input--prefix {
       max-width: 166px;
     }
+
     .el-range-editor.el-input__inner {
       min-width: 168px;
       max-width: 224px;
+
       .el-range-input {
         background-color: transparent;
       }
@@ -65,6 +72,7 @@
       width: 100%;
       background-color: transparent;
     }
+
     .el-input__inner:active,
     .el-input__inner:focus {
       box-shadow: none;
@@ -78,32 +86,45 @@
       vertical-align: middle;
       padding: 0 10px;
     }
+
     .el-radio-group {
       padding: 0 10px;
     }
 
     .n20-num-w {
+
       .el-input,
       .el-input__inner {
         padding-left: 0;
       }
     }
+
     &-close {
       display: none;
       position: absolute;
       top: -6px;
       right: -10px;
     }
+
     &:hover {
       .n20-advanced-filter-item-close {
         display: inline-block;
       }
     }
   }
+
+  &-item.el-form-item[disabled] {
+    background-color: #f5f5f5;
+    border-color: #e4e7ed;
+    color: #333333;
+    cursor: not-allowed;
+  }
+
   &-content {
     display: inline-block;
     white-space: nowrap;
     text-overflow: ellipsis;
+
     .el-select.el-select--small {
       .el-select__tags {
         max-width: 88px !important;
@@ -112,10 +133,12 @@
       }
     }
   }
+
   :hover {
     border-color: $--color-primary;
     cursor: pointer;
   }
+
   &-add {
     display: inline-block;
     vertical-align: middle;
@@ -125,4 +148,4 @@
 .popover-check-box {
   max-height: 300px;
   overflow-y: auto;
-}
+}

package/src/components/AdvancedFilter/filterItem.vue

@@ -1,20 +1,27 @@
 <template>
-  <div class="popover-check-box">
-    <el-checkbox-group v-model="checkList" class="flex-column" @change="checkChange">
-      <el-checkbox
-        v-for="(item, i) in filterList"
-        :key="i"
-        class="m-t-b"
-        :disabled="checkList.includes(item.label)"
-        :label="item.label"
-      />
-    </el-checkbox-group>
-  </div>
+  <el-checkbox-group v-model="checkArrayCalc" class="popover-check-box" @change="checkChange">
+    <vue-draggable
+      :list="filterList"
+      :animation="200"
+      group="dragBox"
+      :handle="'.n20-icon-tuodong'"
+      @change="dragChange"
+    >
+      <div v-for="(item, index) in filterList" :key="index" class="n20-drag-list-item">
+        <el-checkbox :disabled="item.static" :label="item">{{ item.label }}</el-checkbox
+        ><i class="n20-drag-icon n20-icon-tuodong"></i>
+      </div>
+    </vue-draggable>
+  </el-checkbox-group>
 </template>
 
 <script>
+import importGlobal from '../../utils/importGlobal.js'
 export default {
   name: 'FilterItem',
+  components: {
+    vueDraggable: () => importGlobal('vuedraggable', () => import(/*webpackChunkName: "vuedraggable"*/ 'vuedraggable'))
+  },
   props: {
     filterList: {
       type: Array,
@@ -25,22 +32,23 @@ export default {
       default: () => []
     }
   },
-  data() {
-    return {
-      checkList: ''
-    }
-  },
-  watch: {
-    checkArray: {
-      handler(val) {
-        this.checkList = val
+  computed: {
+    checkArrayCalc: {
+      get() {
+        return this.checkArray
       },
-      deep: true
+      set(value) {
+        this.$emit('update:checkArray', value)
+        return value
+      }
     }
   },
   methods: {
     checkChange(keys) {
       this.$emit('checked', keys)
+    },
+    dragChange() {
+      this.$emit('checked', this.checkArrayCalc)
     }
   }
 }

package/src/components/AdvancedFilter/form-item-input.vue

@@ -6,16 +6,17 @@
     :style="{
       width:
         form[item.value] && form[item.value].length > 0
-          ? (context.measureText(form[item.value]).width * 1.4 < 75
+          ? (context.measureText(form[item.value]).width * 1.4 + 45 < 75
               ? 75
-              : context.measureText(form[item.value]).width * 1.4 > 396
+              : context.measureText(form[item.value]).width * 1.4 + 45 > 396
               ? 396
-              : context.measureText(form[item.value]).width * 1.4 + 35) + 'px'
-          : 120 - 18 - context.measureText(item.label).width * 1.4 + 'px'
+              : context.measureText(form[item.value]).width * 1.4 + 45) + 'px'
+          : item.width || 100
     }"
+    :value-data="context.measureText(form[item.value]).width * 1.4 + 45 + 'px'"
     v-bind="item.props"
     :placeholder="item.props && item.props.placeholder ? item.props.placeholder : $lc('请输入')"
-    v-on="item.on"
+    @blur="handleBlur"
   />
   <el-input
     v-else-if="item.type === 'search'"
@@ -24,12 +25,12 @@
     :style="{
       width:
         form[item.value] && form[item.value].length > 0
-          ? context.measureText(form[item.value]).width * 1.4 + 40 + 'px'
-          : 120 - 18 - context.measureText(item.label).width * 1.4 + 'px'
+          ? context.measureText(form[item.value]).width * 1.4 + 50 + 'px'
+          : item.width || 100
     }"
     readonly
     v-bind="item.props"
-    v-on="item.on"
+    @blur="handleBlur"
   >
     <i
       slot="suffix"
@@ -55,15 +56,15 @@
                 (r) =>
                   r.value === form[item.value] ||
                   (item.props && item.props.valueKey && r[item.props.valueKey] === form[item.value])
-              ).label
+              )
             ).width *
               1.4 +
             48 +
             'px'
-          : 120 - 18 - context.measureText(item.label).width * 1.4 + 'px'
+          : item.width || 100
     }"
     v-bind="item.props"
-    v-on="item.on"
+    @change="handleChange"
   >
     <template v-if="item.props && item.props.labelKey && item.props.valueKey">
       <el-option
@@ -90,34 +91,36 @@
     :style="{
       width:
         form[item.value] && Math.floor(Math.log10(form[item.value])) + 1 > 0
-          ? (context.measureText(form[item.value]).width * 1.4 < 74
+          ? (context.measureText(form[item.value]).width * 1.6 + 60 < 74
               ? 74
-              : context.measureText(form[item.value]).width * 1.4 > 396
+              : context.measureText(form[item.value]).width * 1.6 + 60 > 396
               ? 396
-              : context.measureText(form[item.value]).width * 1.4 + 35) + 'px'
-          : 120 - 18 - context.measureText(item.label).width * 1.4 + 'px'
+              : context.measureText(form[item.value]).width * 1.6 + 60) + 'px'
+          : item.width || 100
     }"
     v-bind="item.props"
-    v-on="item.on"
+    @blur="handleChange"
   />
   <inputNumberRange
     v-else-if="item.type === 'numberrange'"
     :start-value.sync="form[item.startValue]"
     :end-value.sync="form[item.endValue]"
     :style="{
-      width: (form[item.startValue] && Math.floor(Math.log10(form[item.startValue])) + 1 > 0 ? 202 : 166) + 'px'
+      width:
+        item.width ||
+        (form[item.startValue] && Math.floor(Math.log10(form[item.startValue])) + 1 > 0 ? 202 : 166) + 'px'
     }"
     v-bind="item.props"
-    v-on="item.on"
+    @blur="handleChange"
   />
   <datePickerPor
     v-else-if="['date', 'datetime', 'year', 'month', 'week'].includes(item.type)"
     v-model="form[item.value]"
     :type="item.type"
     :clearable="(item.props && item.props.clearable) || false"
-    :style="{ width: 166 + 'px' }"
+    :style="{ width: item.width || 166 + 'px' }"
     v-bind="item.props"
-    v-on="item.on"
+    @change="handleChange"
   />
   <datePickerPor
     v-else-if="['daterange', 'datetimerange', ' monthrange'].includes(item.type)"
@@ -125,11 +128,16 @@
     :start-date.sync="form[item.startDate]"
     :end-date.sync="form[item.endDate]"
     :clearable="(item.props && item.props.clearable) || false"
-    style="width: 100%"
+    :style="{ width: item.width || 100 }"
     v-bind="item.props"
-    v-on="item.on"
+    @change="handleChange"
   />
-  <el-checkbox-group v-else-if="item.type === 'checkbox'" v-model="form[item.value]" v-bind="item.props" v-on="item.on">
+  <el-checkbox-group
+    v-else-if="item.type === 'checkbox'"
+    v-model="form[item.value]"
+    v-bind="item.props"
+    @change="handleChange"
+  >
     <el-checkbox v-for="c in item.options" :key="c.value" :label="c.value" :disabled="c.disabled">{{
       c.label
     }}</el-checkbox>
@@ -144,6 +152,7 @@ import axios from '../../utils/axios'
 import inputNumber from '../InputNumber/index.vue'
 import inputNumberRange from '../InputNumber/numberRange.vue'
 import datePickerPor from '../DatePicker/por.vue'
+import { $lc } from '../../utils/i18n/index.js'
 
 const canvas = document.createElement('canvas')
 const context = canvas.getContext('2d')
@@ -169,12 +178,19 @@ export default {
       context
     }
   },
+
   created() {
     if (this.item.reqOptions) {
       this.getOptions()
     }
   },
   methods: {
+    handleBlur(fn, value) {
+      this.$emit('blur')
+    },
+    handleChange() {
+      this.$emit('blur')
+    },
     getOptions() {
       let reqOptions = this.item.reqOptions
       let url = reqOptions.url || ''