@fouro/melx - npm Package Compare versions

Comparing version 1.0.12 to 1.0.13

package.json

@@ -56,3 +56,3 @@ {
   },
-  "version": "1.0.12"
+  "version": "1.0.13"
 }

src/components/configSetting/Times.vue

@@ -100,3 +100,4 @@ <template>
                     { required: true, message: this.$t('components.timesRange.message.error.name'), trigger: 'blur' },
-                    { max: 64, message: this.$t('components.timesRange.addThroughRule.message.error.name.max'), trigger: 'blur' }
+                    { pattern: /\S+/, message: this.$t('components.timesRange.message.error.name') },
+                    { max: 64, message: this.$t('components.timesRange.message.error.nameLength'), trigger: 'blur' }
                 ],
@@ -114,3 +115,7 @@ customDays: [{ required: true, message: this.$t('components.timesRange.message.error.customDays') }],
         this.$bus.$off('navigationclose', this.onClose)
-        //this.$root.$el.removeChild(this.$el)
+        try {
+            this.$root.$el.removeChild(this.$el)
+        } catch (e) {
+
+        }
     },
@@ -117,0 +122,0 @@ computed: {

src/components/configSetting/TimesRange.vue

 <template>
-  <div class="times-section">
-    <div class="times-button">
-      <el-button @click="handleCreate" class="btn-addrange" :disabled="disabled">
-        <i class="el-icon-plus"></i>{{$t('components.timesRange.buttons.add')}}
-      </el-button>
+    <div class="times-section">
+        <div class="times-button">
+            <el-button @click="handleCreate" class="btn-addrange" :disabled="disabled">
+                <i class="el-icon-plus"></i>{{$t('components.timesRange.buttons.add')}}
+            </el-button>
+        </div>
+        <div class="times-result">
+            <el-form label-width="18rem">
+                <el-form-item v-for="(item,index) in data" :label="item.title">
+                    <div class="select-field  el-input  el-input--suffix" @click.stop="handleEdit(index,item)"><a href="javascript:void(0)" @click.stop="handleRemove(index,item)"><i class="btn-danger el-icon-delete"></i></a>&nbsp;&nbsp;&nbsp;{{item.action === 'ALLOW'?$t('components.timesRange.allow'):$t('components.timesRange.forbidden')}}<span class="el-input__prefix"></span><span class="el-input__suffix"><span class="el-input__suffix-inner"><i class="el-icon-arrow-right"></i></span></span> </div>
+                </el-form-item>
+            </el-form>
+        </div>
+        <times v-if="dialog.visible" :state="dialog.state" @close="handleClose($event)">
+        </times>
     </div>
-    <div class="times-result">
-      <el-form label-width="12rem">
-        <el-form-item v-for="(item,index) in data" :label="item.title">
-          <div class="select-field  el-input  el-input--suffix" @click.stop="handleEdit(index,item)"><a href="javascript:void(0)" @click.stop="handleRemove(index,item)"><i class="btn-danger el-icon-delete"></i></a>&nbsp;&nbsp;&nbsp;{{item.action === 'ALLOW'?$t('components.timesRange.allow'):$t('components.timesRange.forbidden')}}<span class="el-input__prefix"></span><span class="el-input__suffix"><span class="el-input__suffix-inner"><i class="el-icon-arrow-right"></i></span></span> </div>
-        </el-form-item>
-      </el-form>
-    </div>
-    <times v-if="dialog.visible" :state="dialog.state" @close="handleClose($event)">
-    </times>
-  </div>
 </template>
@@ -23,135 +23,143 @@ <script type="text/javascript">
 export default {
-  name: 'timesrange',
-  mixins: [Locale],
-  props: {
-    value: { required: true },
-    disabled: {
-      type: Boolean,
-      default: false
-    }
-  },
-  components: {
-    times
-  },
-  computed: {
-    data: {
-      get() {
-        if (!this.value) return []
-        return JSON.parse(this.value)
-      },
-      set(value) {
-        this.emitChange(value)
-      }
-    }
-  },
-  data() {
-    return {
-      dialog: {
-        visible: false,
-        selectedIndex: null,
-        state: {
-          data: null,
-          title: null
+    name: 'timesrange',
+    mixins: [Locale],
+    props: {
+        value: { required: true },
+        disabled: {
+            type: Boolean,
+            default: false
         }
-      }
-    }
-  },
-  mounted() {
-
-  },
-  beforeDestroy() {
-
-  },
-  methods: {
-    dayFormatter(row) {
-      let weekdays = [this.$t('common.weekdays.Sunday'), this.$t('common.weekdays.Monday'), this.$t('common.weekdays.Tuesday'), this.$t('common.weekdays.Wednesday'), this.$t('common.weekdays.Thursday'), this.$t('common.weekdays.Friday'), this.$t('common.weekdays.Saturday')]
-      let temp = []
-      row.customDays.forEach(item => {
-        temp.push(weekdays[parseInt(item) - 1])
-      })
-      return temp.join(',')
     },
-    timeFormatter(row) {
-      let t = row.timeRange,
-        start = t.start,
-        end = t.end
-      return `${start.hour}:${fillZero(start.minute)}:${fillZero(start.second)} ${this.$t('common.rangeSeparator')} ${end.hour}:${fillZero(end.minute)}:${fillZero(end.second)}`
-
-      function fillZero(value) {
-        return ('00' + value).slice(-2);
-      }
+    components: {
+        times
     },
-    actionFormatter(row) {
-      return row.action == 'ALLOW' ? this.$t('components.timesRange.allow') : this.$t('components.timesRange.forbidden')
+    computed: {
+        data: {
+            get() {
+                if (!this.value) return []
+                return JSON.parse(this.value)
+            },
+            set(value) {
+                this.emitChange(value)
+            }
+        }
     },
+    data() {
+        return {
+            dialog: {
+                visible: false,
+                selectedIndex: null,
+                state: {
+                    data: null,
+                    title: null
+                }
+            }
+        }
+    },
+    mounted() {
 
-    handleCreate() {
-      this.dialog.visible = true;
-      this.dialog.state = {
-        title: null,
-        data: null
-      }
-      this.broadcast(this.$t('components.timesRange.title.create'))
     },
-    handleRemove(index, row) {
-      this.data.splice(index, 1)
-      this.emitChange(this.data)
+    beforeDestroy() {
+
     },
-    handleEdit(index, row) {
-      this.dialog.visible = true;
-      this.dialog.selectedIndex = index;
-      this.dialog.state = {
-        title: ' ',
-        data: JSON.parse(JSON.stringify(row))
-      }
-      this.broadcast(this.$t('components.timesRange.title.update'))
-    },
-    handleClose(event) {
-      this.dialog.visible = false
-      if (event) {
-        //if edit
-        let index = this.dialog.selectedIndex;
-        if (index !== null) {
-          this.data.splice(index, 1, event)
-        } else {
-          this.data.push(event)
+    methods: {
+        dayFormatter(row) {
+            let weekdays = [this.$t('common.weekdays.Sunday'), this.$t('common.weekdays.Monday'), this.$t('common.weekdays.Tuesday'), this.$t('common.weekdays.Wednesday'), this.$t('common.weekdays.Thursday'), this.$t('common.weekdays.Friday'), this.$t('common.weekdays.Saturday')]
+            let temp = []
+            row.customDays.forEach(item => {
+                temp.push(weekdays[parseInt(item) - 1])
+            })
+            return temp.join(',')
+        },
+        timeFormatter(row) {
+            let t = row.timeRange,
+                start = t.start,
+                end = t.end
+            return `${start.hour}:${fillZero(start.minute)}:${fillZero(start.second)} ${this.$t('common.rangeSeparator')} ${end.hour}:${fillZero(end.minute)}:${fillZero(end.second)}`
+
+            function fillZero(value) {
+                return ('00' + value).slice(-2);
+            }
+        },
+        actionFormatter(row) {
+            return row.action == 'ALLOW' ? this.$t('components.timesRange.allow') : this.$t('components.timesRange.forbidden')
+        },
+
+        handleCreate() {
+            if (this.data.length >= 5) {
+                this.$message.error(this.$t('components.timesRange.message.error.countLimit'))
+                return
+            }
+            this.dialog.visible = true;
+            this.dialog.state = {
+                title: null,
+                data: null
+            }
+            this.broadcast(this.$t('components.timesRange.title.create'))
+        },
+        handleRemove(index, row) {
+            this.data.splice(index, 1)
+            this.emitChange(this.data)
+        },
+        handleEdit(index, row) {
+            this.dialog.visible = true;
+            this.dialog.selectedIndex = index;
+            this.dialog.state = {
+                title: ' ',
+                data: JSON.parse(JSON.stringify(row))
+            }
+            this.broadcast(this.$t('components.timesRange.title.update'))
+        },
+        handleClose(event) {
+            this.dialog.visible = false
+            if (event) {
+                //if edit
+                let index = this.dialog.selectedIndex;
+                if (index !== null) {
+                    this.data.splice(index, 1, event)
+                } else {
+                    this.data.push(event)
+                }
+                this.emitChange(this.data)
+            }
+            this.dialog.selectedIndex = null;
+            this.broadcast(null)
+        },
+        emitChange(value) {
+            this.$emit('input', JSON.stringify(value))
+        },
+        broadcast(title) {
+            this.$bus.$emit('navigationChange', title)
         }
-        this.emitChange(this.data)
-      }
-      this.dialog.selectedIndex = null;
-      this.broadcast(null)
-    },
-    emitChange(value) {
-      this.$emit('input', JSON.stringify(value))
-    },
-    broadcast(title) {
-      this.$bus.$emit('navigationChange', title)
     }
-  }
 }
-
 </script>
 <style type="text/css">
 .times-button {
-  text-align: left;
-  border-bottom: 1px solid #e5e5e5;
-  padding: 0;
-  margin: 0;
+    text-align: left;
+    border-bottom: 1px solid #e5e5e5;
+    padding: 0;
+    margin: 0;
 }
 
 .el-button.btn-addrange {
-  font-size: 1.7rem;
-  color: #66b1ff;
-  border: none;
-  outline: none;
-  text-align: left;
-  background-color: transparent;
-  padding: 1.2rem 0rem;
+    font-size: 1.7rem;
+    color: #66b1ff;
+    border: none;
+    outline: none;
+    text-align: left;
+    background-color: transparent;
+    padding: 1.2rem 0rem;
 }
 
 .btn-danger {
-  color: #F56C6C;
-  font-weight: 700;
+    color: #F56C6C;
+    font-weight: 700;
 }
 
-</style>
+.config-container .times-result .el-form .el-form-item .el-form-item__label {
+    white-space: unset;
+    word-break: break-all;
+    word-break: break-word;
+}
+</style>

No alert changes

Improved metrics

Total package byte prevSize

218617

0.53%

No dependency changes