haiwei-ui 1.0.2 → 1.0.4

package/packages/components/update-password/index.vue

@@ -1,17 +1,5 @@
 <template>
-  <nm-form-dialog
-    ref="form"
-    title="修改密码"
-    class="nm-update-password"
-    width="400px"
-    icon="password"
-    :model="model"
-    :rules="rules"
-    :action="updatePassword"
-    :visible.sync="visible_"
-    success-msg-text="修改成功"
-    @success="logout"
-  >
+  <nm-form-dialog ref="form" title="修改密码" class="nm-update-password" width="400px" icon="password" :model="model" :rules="rules" :action="updatePassword" :visible.sync="visible_" success-msg-text="修改成功" @success="logout">
     <el-alert title="提示" type="warning" description="密码修改成功后，需要重新登录" show-icon :closable="false"></el-alert>
     <el-row>
       <el-col :span="18" :offset="2">
@@ -29,56 +17,56 @@
   </nm-form-dialog>
 </template>
 <script>
-import visible from '../../mixins/components/visible.js'
-import { mapState, mapActions } from 'vuex'
+  import visible from '../../mixins/components/visible.js'
+  import { mapState, mapActions } from 'vuex'
 
-export default {
-  name: 'UpdatePassword',
-  mixins: [visible],
-  data() {
-    // 密码验证
-    const validator = (rule, value, callback) => {
-      if (value === '') {
-        callback(new Error('请输入确认密码'))
-      } else if (value !== this.model.newPassword) {
-        callback(new Error('两次输入密码不一致!'))
-      } else {
-        callback()
+  export default {
+    name: 'UpdatePassword',
+    mixins: [visible],
+    data() {
+      // 密码验证
+      const validator = (rule, value, callback) => {
+        if (value === '') {
+          callback(new Error('请输入确认密码'))
+        } else if (value !== this.model.newPassword) {
+          callback(new Error('两次输入密码不一致!'))
+        } else {
+          callback()
+        }
       }
-    }
-    return {
-      model: {
-        oldPassword: '',
-        newPassword: '',
-        confirmPassword: ''
-      },
-      rules: {
-        oldPassword: [{ required: true, message: '请输入原密码' }],
-        newPassword: [
-          { required: true, message: '请输入新密码' },
-          { min: 6, message: '密码长度不能小于6' }
-        ],
-        confirmPassword: [{ validator }]
+      return {
+        model: {
+          oldPassword: '',
+          newPassword: '',
+          confirmPassword: ''
+        },
+        rules: {
+          oldPassword: [{ required: true, message: '请输入原密码' }],
+          newPassword: [
+            { required: true, message: '请输入新密码' },
+            { min: 6, message: '密码长度不能小于6' }
+          ],
+          confirmPassword: [{ validator }]
+        }
       }
+    },
+    computed: {
+      ...mapState('app/system', { updatePassword: s => s.actions.updatePassword })
+    },
+    methods: {
+      ...mapActions('app/system', ['logout'])
     }
-  },
-  computed: {
-    ...mapState('app/system', { updatePassword: s => s.actions.updatePassword })
-  },
-  methods: {
-    ...mapActions('app/system', ['logout'])
   }
-}
 </script>
 <style lang="scss" scoped>
-.nm-update-password {
-  .el-alert {
-    margin-top: -5px;
-    margin-bottom: 10px;
-    line-height: 15px;
-  }
-  .el-visible__footer {
-    line-height: 15px;
+  .nm-update-password {
+    .el-alert {
+      margin-top: -5px;
+      margin-bottom: 10px;
+      line-height: 15px;
+    }
+    .el-visible__footer {
+      line-height: 15px;
+    }
   }
-}
 </style>

package/packages/layout.vue

@@ -14,26 +14,26 @@
   </div>
 </template>
 <script>
-import { mapState, mapActions } from 'vuex'
-export default {
-  computed: {
-    ...mapState('app/skins', ['initialized', 'current']),
-    ...mapState('app/dialog-menu', { dialogMenu: state => state }),
-    // 是否在框架中显示
-    inFrame() {
-      return !this.$route.meta || this.$route.meta.frameIn !== false
-    },
-    dialogNemuVisible: {
-      get() {
-        return this.dialogMenu.visible
+  import { mapState, mapActions } from 'vuex'
+  export default {
+    computed: {
+      ...mapState('app/skins', ['initialized', 'current']),
+      ...mapState('app/dialog-menu', { dialogMenu: state => state }),
+      // 是否在框架中显示
+      inFrame() {
+        return !this.$route.meta || this.$route.meta.frameIn !== false
       },
-      set() {
-        this.dialogMenuClose()
+      dialogNemuVisible: {
+        get() {
+          return this.dialogMenu.visible
+        },
+        set() {
+          this.dialogMenuClose()
+        }
       }
+    },
+    methods: {
+      ...mapActions('app/dialog-menu', { dialogMenuClose: 'close' })
     }
-  },
-  methods: {
-    ...mapActions('app/dialog-menu', { dialogMenuClose: 'close' })
   }
-}
 </script>

package/packages/mixins/components/checkbox.vue

@@ -1,98 +1,87 @@
 <template>
-  <el-checkbox-group
-    class="nm-checkbox"
-    v-model="value_"
-    :size="size || fontSize"
-    :disabled="disabled"
-    :min="min"
-    :max="max"
-    :text-color="textColor"
-    :fill="fill"
-    @change="onChange"
-    v-loading="loading"
-  >
+  <el-checkbox-group class="nm-checkbox" v-model="value_" :size="size || fontSize" :disabled="disabled" :min="min" :max="max" :text-color="textColor" :fill="fill" @change="onChange" v-loading="loading">
     <slot :options="options">
-      <component :is="_tagName" v-for="item in options" :key="item.value" :label="item.value" :disabled="item.disabled" :border="border"> {{ item.label }}</component>
+      <component :is="_tagName" v-for="item in options" :key="item.value" :label="item.value" :disabled="item.disabled" :border="border">{{ item.label }}</component>
     </slot>
   </el-checkbox-group>
 </template>
 <script>
-import loading from './loading'
-export default {
-  mixins: [loading],
-  data() {
-    return {
-      value_: this.value,
-      options: [],
-      action: null,
-      loading: false
-    }
-  },
-  props: {
-    value: {
-      type: Array,
-      default() {
-        return []
+  import loading from './loading'
+  export default {
+    mixins: [loading],
+    data() {
+      return {
+        value_: this.value,
+        options: [],
+        action: null,
+        loading: false
       }
     },
-    size: String,
-    disabled: Boolean,
-    min: Number,
-    max: Number,
-    border: Boolean,
-    textColor: String,
-    fill: String,
-    button: Boolean
-  },
-  computed: {
-    _tagName() {
-      return this.button ? 'el-checkbox-button' : 'el-checkbox'
+    props: {
+      value: {
+        type: Array,
+        default() {
+          return []
+        }
+      },
+      size: String,
+      disabled: Boolean,
+      min: Number,
+      max: Number,
+      border: Boolean,
+      textColor: String,
+      fill: String,
+      button: Boolean
     },
-    selection() {
-      let list = []
-      if (this.value_) {
-        this.value_.forEach(item => {
-          for (var i = 0; i < this.options.length; i++) {
-            const opt = this.options[i]
-            if (opt.value === item) {
-              list.push(opt)
-              break
+    computed: {
+      _tagName() {
+        return this.button ? 'el-checkbox-button' : 'el-checkbox'
+      },
+      selection() {
+        let list = []
+        if (this.value_) {
+          this.value_.forEach(item => {
+            for (var i = 0; i < this.options.length; i++) {
+              const opt = this.options[i]
+              if (opt.value === item) {
+                list.push(opt)
+                break
+              }
             }
-          }
-        })
+          })
+        }
+        return list
+      }
+    },
+    methods: {
+      refresh() {
+        this.loading = true
+        this.action()
+          .then(options => {
+            this.options = options
+            this.loading = false
+          })
+          .catch(() => {
+            this.loading = false
+          })
+      },
+      // 清楚已选项
+      clear() {
+        this.value_ = this.value
+        this.onChange()
+      },
+      onChange() {
+        this.$emit('input', this.value_)
+        this.$emit('change', this.value_, this.selection, this.options)
       }
-      return list
-    }
-  },
-  methods: {
-    refresh() {
-      this.loading = true
-      this.action()
-        .then(options => {
-          this.options = options
-          this.loading = false
-        })
-        .catch(() => {
-          this.loading = false
-        })
     },
-    // 清楚已选项
-    clear() {
-      this.value_ = this.value
-      this.onChange()
+    created() {
+      this.refresh()
     },
-    onChange() {
-      this.$emit('input', this.value_)
-      this.$emit('change', this.value_, this.selection, this.options)
-    }
-  },
-  created() {
-    this.refresh()
-  },
-  watch: {
-    value(val) {
-      if (val !== this.value_) this.value_ = val
+    watch: {
+      value(val) {
+        if (val !== this.value_) this.value_ = val
+      }
     }
   }
-}
 </script>

package/packages/mixins/components/radio.vue

@@ -6,79 +6,79 @@
   </el-radio-group>
 </template>
 <script>
-import loading from './loading'
+  import loading from './loading'
 
-export default {
-  mixins: [loading],
-  data() {
-    return {
-      value_: this.value,
-      options: [],
-      loading: false,
-      /**数据请求方法 */
-      action: null
-    }
-  },
-  props: {
-    value: [String, Number],
-    /** 大小 */
-    size: String,
-    /** 禁用 */
-    disabled: Boolean,
-    /** 按钮形式的 Radio 激活时的文本颜色，默认 #fff */
-    textColor: String,
-    /** 按钮形式的 Radio 激活时的填充色和边框色，默认 #409EFF */
-    fill: String,
-    /** 是否显示边框 */
-    border: Boolean,
-    /** 是否默认选中第一个 */
-    checkedFirst: Boolean,
-    /**  按钮样式 */
-    button: Boolean
-  },
-  computed: {
-    _tagName() {
-      return this.button ? 'el-radio-button' : 'el-radio'
-    }
-  },
-  methods: {
-    refresh() {
-      this.loading = true
-      this.action()
-        .then(data => {
-          this.options = data
-          if (data.length > 0 && this.checkedFirst) {
-            this.onChange(data[0].value)
-          }
-          this.loading = false
-        })
-        .catch(() => {
-          this.loading = false
-        })
+  export default {
+    mixins: [loading],
+    data() {
+      return {
+        value_: this.value,
+        options: [],
+        loading: false,
+        /**数据请求方法 */
+        action: null
+      }
     },
-    onChange(val) {
-      this.value_ = val
-      this.$emit('input', this.value_)
-      this.$emit(
-        'change',
-        this.value_,
-        this.options.find(m => m.value === this.value_),
-        this.options
-      )
+    props: {
+      value: [String, Number],
+      /** 大小 */
+      size: String,
+      /** 禁用 */
+      disabled: Boolean,
+      /** 按钮形式的 Radio 激活时的文本颜色，默认 #fff */
+      textColor: String,
+      /** 按钮形式的 Radio 激活时的填充色和边框色，默认 #409EFF */
+      fill: String,
+      /** 是否显示边框 */
+      border: Boolean,
+      /** 是否默认选中第一个 */
+      checkedFirst: Boolean,
+      /**  按钮样式 */
+      button: Boolean
     },
-    reset() {
-      if (this.options.length > 0 && this.checkedFirst) {
-        this.onChange(this.options[0].value)
+    computed: {
+      _tagName() {
+        return this.button ? 'el-radio-button' : 'el-radio'
+      }
+    },
+    methods: {
+      refresh() {
+        this.loading = true
+        this.action()
+          .then(data => {
+            this.options = data
+            if (data.length > 0 && this.checkedFirst) {
+              this.onChange(data[0].value)
+            }
+            this.loading = false
+          })
+          .catch(() => {
+            this.loading = false
+          })
+      },
+      onChange(val) {
+        this.value_ = val
+        this.$emit('input', this.value_)
+        this.$emit(
+          'change',
+          this.value_,
+          this.options.find(m => m.value === this.value_),
+          this.options
+        )
+      },
+      reset() {
+        if (this.options.length > 0 && this.checkedFirst) {
+          this.onChange(this.options[0].value)
+        }
+      }
+    },
+    created() {
+      this.refresh()
+    },
+    watch: {
+      value(val) {
+        if (val !== this.value_) this.value_ = val
       }
-    }
-  },
-  created() {
-    this.refresh()
-  },
-  watch: {
-    value(val) {
-      if (val !== this.value_) this.value_ = val
     }
   }
-}
 </script>

package/packages/page/403/index.vue

@@ -9,42 +9,46 @@
         </div>
         <p class="nm-m-10 nm-size-60">ERROR !</p>
         <p class="nm-m-20">亲！您无权访问该页面哦~</p>
-        <p class="nm-text-center"><nm-button type="text" text="《 带您回家" @click="$router.push('/')" /> | <nm-button type="text" text="原路返回 》" class="nm-m-l-0" @click="$router.go(-1)" /></p>
+        <p class="nm-text-center">
+          <nm-button type="text" text="《 带您回家" @click="$router.push('/')" />
+          |
+          <nm-button type="text" text="原路返回 》" class="nm-m-l-0" @click="$router.go(-1)" />
+        </p>
       </div>
     </nm-box>
   </nm-container>
 </template>
 <style lang="scss">
-.nm-error-403 {
-  margin: 100px auto;
-  width: 600px;
-  height: 400px;
-  color: #979797;
-  text-align: center;
-  &-number {
-    div {
-      position: relative;
-      display: inline-block;
-      margin: 5px;
-      width: 90px;
-      height: 120px;
-      line-height: 120px;
-      text-align: center;
-      font-size: 80px;
-      border: 1px solid #cccccc;
-      box-sizing: border-box;
-
-      &::after {
-        content: '';
-        position: absolute;
-        top: -4px;
-        left: -4px;
-        width: 96px;
-        height: 126px;
+  .nm-error-403 {
+    margin: 100px auto;
+    width: 600px;
+    height: 400px;
+    color: #979797;
+    text-align: center;
+    &-number {
+      div {
+        position: relative;
+        display: inline-block;
+        margin: 5px;
+        width: 90px;
+        height: 120px;
+        line-height: 120px;
+        text-align: center;
+        font-size: 80px;
         border: 1px solid #cccccc;
         box-sizing: border-box;
+
+        &::after {
+          content: '';
+          position: absolute;
+          top: -4px;
+          left: -4px;
+          width: 96px;
+          height: 126px;
+          border: 1px solid #cccccc;
+          box-sizing: border-box;
+        }
       }
     }
   }
-}
 </style>

package/packages/page/404/index.vue

@@ -9,42 +9,46 @@
         </div>
         <p class="nm-m-10 nm-size-60">ERROR !</p>
         <p class="nm-m-20">亲！您是不是迷路了~</p>
-        <p class="nm-text-center"><nm-button type="text" text="《 带您回家" @click="$router.push('/')" /> | <nm-button type="text" text="原路返回 》" class="nm-m-l-0" @click="$router.go(-1)" /></p>
+        <p class="nm-text-center">
+          <nm-button type="text" text="《 带您回家" @click="$router.push('/')" />
+          |
+          <nm-button type="text" text="原路返回 》" class="nm-m-l-0" @click="$router.go(-1)" />
+        </p>
       </div>
     </nm-box>
   </nm-container>
 </template>
 <style lang="scss">
-.nm-error-404 {
-  margin: 100px auto;
-  width: 600px;
-  height: 400px;
-  color: #979797;
-  text-align: center;
-  &-number {
-    div {
-      position: relative;
-      display: inline-block;
-      margin: 5px;
-      width: 90px;
-      height: 120px;
-      line-height: 120px;
-      text-align: center;
-      font-size: 80px;
-      border: 1px solid #cccccc;
-      box-sizing: border-box;
-
-      &::after {
-        content: '';
-        position: absolute;
-        top: -4px;
-        left: -4px;
-        width: 96px;
-        height: 126px;
+  .nm-error-404 {
+    margin: 100px auto;
+    width: 600px;
+    height: 400px;
+    color: #979797;
+    text-align: center;
+    &-number {
+      div {
+        position: relative;
+        display: inline-block;
+        margin: 5px;
+        width: 90px;
+        height: 120px;
+        line-height: 120px;
+        text-align: center;
+        font-size: 80px;
         border: 1px solid #cccccc;
         box-sizing: border-box;
+
+        &::after {
+          content: '';
+          position: absolute;
+          top: -4px;
+          left: -4px;
+          width: 96px;
+          height: 126px;
+          border: 1px solid #cccccc;
+          box-sizing: border-box;
+        }
       }
     }
   }
-}
 </style>

package/packages/page/default/index.vue

@@ -4,26 +4,30 @@
       <div class="nm-default">
         <nm-icon name="work" class="nm-size-100" />
         <h1 class="nm-m-20 nm-size-20">欢迎登录{{ title }}~</h1>
-        <p>本系统使用开源框架 <a class="nm-link" target="_blank" href="https://github.com/iamoldli/NetModular">NetModular</a> 开发</p>
+        <p>
+          本系统使用开源框架
+          <a class="nm-link" target="_blank" href="https://github.com/iamoldli/NetModular">NetModular</a>
+          开发
+        </p>
         <img style="width:100%" src="../../../public/images/motto.png" />
       </div>
     </nm-box>
   </nm-container>
 </template>
 <script>
-import { mapState } from 'vuex'
-export default {
-  computed: {
-    ...mapState('app/config', { title: s => s.system.title })
+  import { mapState } from 'vuex'
+  export default {
+    computed: {
+      ...mapState('app/config', { title: s => s.system.title })
+    }
   }
-}
 </script>
 <style lang="scss">
-.nm-default {
-  margin: 100px auto;
-  width: 600px;
-  height: 400px;
-  color: #979797;
-  text-align: center;
-}
+  .nm-default {
+    margin: 100px auto;
+    width: 600px;
+    height: 400px;
+    color: #979797;
+    text-align: center;
+  }
 </style>