n20-common-lib 1.3.29 → 1.3.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "n20-common-lib",
-  "version": "1.3.29",
+  "version": "1.3.30",
   "private": false,
   "main": "src/index.js",
   "scripts": {

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

@@ -1,10 +1,7 @@
 .el-button--primary,
 .el-button--default,
 .el-button--default.is-plain,
-.el-button--warning.is-plain,
-.el-button--mini,
-.el-button--mini.is-plain,
-.el-button--danger.is-plain {
+.el-button--warning.is-plain {
   min-width: 72px;
 }
 

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

@@ -86,12 +86,3 @@
 .el-table .descending .sort-caret.descending {
   color: $--color-primary;
 }
-
-.el-table {
-  .cell {
-    .el-dropdown-link.n20-icon-moren {
-      color: $--color-primary;
-    }
-  }
-
-}

package/src/components/ChildRange/index.vue

@@ -1,36 +1,32 @@
 <template>
-  <div class="n20-subticket-interval">
-    <div class="input-child-range" :class="{ 'is-disabled': disabled }">
-      <div class="flex">
-        <div class="from">
-          <el-input
-            ref="input_left"
-            v-model="value1"
-            :disabled="disabled"
-            placeholder="子票区间起"
-            @blur="handleBlurleft"
-            @focus="handleFocusLeft"
-            @input="handleInputleft"
-            @change="handleInputChangeLeft"
-          />
-        </div>
-        <div class="center">
-          <span> - </span>
-        </div>
-        <div class="to">
-          <el-input
-            ref="input_right"
-            v-model="value2"
-            :disabled="disabled"
-            placeholder="子票区间止"
-            @blur="handleBlurRight"
-            @focus="handleFocusRight"
-            @input="handleInputRight"
-            @change="handleInputChangeRight"
-          />
-        </div>
-      </div>
-    </div>
+  <div
+    class="n20-subticket-interval flex-box"
+    :class="{ 'is-disabled': disabled, 'is-focus': focus }"
+    :disabled="disabled"
+  >
+    <el-input
+      ref="input_left"
+      v-model="value1"
+      class="from flex-item"
+      :disabled="disabled"
+      placeholder="子票区间起"
+      @blur="handleBlurleft"
+      @focus="handleFocusLeft"
+      @input="handleInputleft"
+      @change="handleInputChangeLeft"
+    />
+    <div class="center">-</div>
+    <el-input
+      ref="input_right"
+      v-model="value2"
+      class="to flex-item"
+      :disabled="disabled"
+      placeholder="子票区间止"
+      @blur="handleBlurRight"
+      @focus="handleFocusRight"
+      @input="handleInputRight"
+      @change="handleInputChangeRight"
+    />
   </div>
 </template>
 
@@ -39,14 +35,16 @@ export default {
   name: 'ChildRange',
   props: {
     // 初始化范围
-    value: { required: true },
-
+    value: {
+      required: true,
+      type: Array,
+      default: () => []
+    },
     // 是否禁用
     disabled: {
       type: Boolean,
       default: false
     },
-
     // 精度参数
     precision: {
       type: Number,
@@ -59,7 +57,8 @@ export default {
   data() {
     return {
       value1: null,
-      value2: null
+      value2: null,
+      focus: false
     }
   },
   watch: {
@@ -84,18 +83,22 @@ export default {
     },
 
     handleBlurleft(event) {
+      this.focus = false
       this.$emit('blurleft', event)
     },
 
     handleFocusLeft(event) {
+      this.focus = true
       this.$emit('focusleft', event)
     },
 
     handleBlurRight(event) {
+      this.focus = false
       this.$emit('blurright', event)
     },
 
     handleFocusRight(event) {
+      this.focus = true
       this.$emit('focusright', event)
     },
 
@@ -163,4 +166,4 @@ export default {
     }
   }
 }
-</script>
+</script>

package/src/components/ChildRange/style.scss

@@ -1,34 +1,34 @@
 .n20-subticket-interval {
-  .input-child-range {
-    background-color: #fff;
-    border: 1px solid #dcdfe6;
-    border-radius: 4px;
-    // 取消element原有的input框样式
-    ::v-deep .el-input--small .el-input__inner {
-      border: 0px;
-      margin: 0;
-      padding: 0 5px;
-      background-color: transparent;
-    }
-    ::v-deep .el-input__inner:focus {
-      box-shadow: none;
-    }
+  background-color: $--color-white;
+  border: 1px solid $--border-color-base;
+  border-radius: $--border-radius-base;
+  // 取消element原有的input框样式
+  .el-input {
+    margin: -1px;
   }
-  .flex {
-    display: flex;
-    flex-direction: row;
-    width: 100%;
-    justify-content: center;
-    align-items: center;
-    .center {
-      color: #cccccc;
-      margin: 0 1px;
-    }
+  .el-input__inner,
+  .el-input__inner:hover {
+    border-color: transparent !important;
+    background-color: transparent !important;
+    box-shadow: none;
   }
-  .is-disabled {
-    background-color: #eef0f6;
-    border-color: #e4e7ed;
-    color: #c0c4cc;
+  &:not([disabled]):hover {
+    border-color: $--color-primary;
+  }
+
+  &:focus,
+  &.is-focus {
+    border-color: $--color-primary;
+    box-shadow: 0 0 2px $--color-primary;
+  }
+  .center {
+    margin: -1px 2px;
+    color: $--color-text-placeholder;
+  }
+  &.is-disabled {
+    background-color: $--background-color-base;
+    border-color: $--border-color-light;
+    color: $--color-info-light;
     cursor: not-allowed;
   }
 }

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

@@ -0,0 +1,133 @@
+<template>
+  <el-input
+    v-if="item.type === 'text' || item.type === undefined"
+    v-model="form[item.value]"
+    :clearable="item | clearableF"
+    style="width: 100%"
+    v-bind="item.props"
+    v-on="item.on"
+  />
+  <el-select
+    v-else-if="item.type === 'select'"
+    v-model="form[item.value]"
+    :clearable="item | clearableF"
+    :multiple="item.multiple"
+    style="width: 100%"
+    v-bind="item.props"
+    v-on="item.on"
+  >
+    <template v-if="item.props && item.props.labelKey && item.props.valueKey">
+      <el-option
+        v-for="(c, i) in item.options"
+        :key="i"
+        :label="c[item.props.labelKey]"
+        :value="c[item.props.valueKey]"
+        :disabled="c.disabled"
+      />
+    </template>
+    <template v-else>
+      <el-option
+        v-for="c in item.options"
+        :key="c.value + '_' + c.label"
+        :label="c.label"
+        :value="c.value"
+        :disabled="c.disabled"
+      />
+    </template>
+  </el-select>
+  <inputNumber
+    v-else-if="item.type === 'number'"
+    v-model="form[item.value]"
+    style="width: 100%"
+    v-bind="item.props"
+    v-on="item.on"
+  />
+  <inputNumberRange
+    v-else-if="item.type === 'numberrange'"
+    :start-value.sync="form[item.startValue]"
+    :end-value.sync="form[item.endValue]"
+    style="width: 100%"
+    v-bind="item.props"
+    v-on="item.on"
+  />
+  <datePickerPor
+    v-else-if="item.type === 'date'"
+    v-model="form[item.value]"
+    type="date"
+    :clearable="item | clearableF"
+    style="width: 100%"
+    v-bind="item.props"
+    v-on="item.on"
+  />
+  <datePickerPor
+    v-else-if="item.type === 'daterange'"
+    type="daterange"
+    :start-date.sync="form[item.startDate]"
+    :end-date.sync="form[item.endDate]"
+    :clearable="item | clearableF"
+    style="width: 100%"
+    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"
+    v-on="item.on"
+  >
+    <el-checkbox
+      v-for="c in item.options"
+      :key="c.value"
+      :label="c.value"
+      :disabled="c.disabled"
+      >{{ c.label }}</el-checkbox
+    >
+  </el-checkbox-group>
+  <el-radio-group
+    v-else-if="item.type === 'radio'"
+    v-model="form[item.value]"
+    v-bind="item.props"
+    v-on="item.on"
+  >
+    <el-radio
+      v-for="c in item.options"
+      :key="c.value"
+      :label="c.value"
+      :disabled="c.disabled"
+      >{{ c.label }}</el-radio
+    >
+  </el-radio-group>
+</template>
+
+<script>
+import inputNumber from '../InputNumber/index.vue'
+import inputNumberRange from '../InputNumber/numberRange.vue'
+import datePickerPor from '../DatePicker/por.vue'
+export default {
+  components: {
+    inputNumber,
+    inputNumberRange,
+    datePickerPor
+  },
+  filters: {
+    clearableF(item) {
+      if (item.props && item.props.clearable === false) {
+        return false
+      } else {
+        return true
+      }
+    }
+  },
+  props: {
+    form: {
+      type: Object,
+      default: undefined
+    },
+    item: {
+      type: Object,
+      default: undefined
+    }
+  }
+}
+</script>
+