n20-common-lib 1.1.98

package/src/components/InputNumber/index.vue

@@ -0,0 +1,153 @@
+<template>
+  <div class="n20-num-w">
+    <el-input
+      v-if="showStr"
+      class="n20-stc"
+      :class="{ 'n20-num--rate': type === 'rate' }"
+      :value="valueStr"
+      :disabled="disabled"
+      :placeholder="$attrs.placeholder"
+      @focus="focusFn"
+    />
+    <el-input-number
+      v-else
+      ref="input-number"
+      class="n20-num"
+      :class="{ 'n20-num--rate': type === 'rate' }"
+      :controls="false"
+      v-bind="$attrs"
+      :value="valueNum"
+      v-on="listeners"
+      @blur="blurFn"
+      @change="changeFn"
+    />
+    <span v-if="type === 'rate'" class="el-input__suffix">
+      <span class="el-input__icon" style="display: inline-block">{{
+        suffix
+      }}</span>
+    </span>
+  </div>
+</template>
+
+<script>
+import numerify from 'numerify'
+export default {
+  name: 'InputNumber',
+  props: {
+    value: {
+      type: [Number, String],
+      default: undefined
+    },
+    type: {
+      type: String,
+      default: 'money',
+      validator(v) {
+        return ['money', 'rate'].includes(v)
+      }
+    },
+    disabled: {
+      type: Boolean,
+      default: undefined
+    },
+    clearable: {
+      type: Boolean,
+      default: false
+    },
+    dNum: {
+      type: Number,
+      default: undefined
+    },
+    format: {
+      type: String,
+      default: undefined
+    },
+    suffix: {
+      type: String,
+      default: '%'
+    }
+  },
+  data() {
+    this.listeners = Object.assign({}, this.$listeners, { input: () => {} })
+    return {
+      valueStr: '',
+      valueNum: undefined,
+      showStr: true
+    }
+  },
+  watch: {
+    value: {
+      handler(val) {
+        if (val && typeof val === 'string' && val.includes(',')) {
+          return this.$emit('input', Number(val.replace(/,/g, '')))
+        }
+        this.valueStr = this.num2str(val)
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    num2str(val = '') {
+      if (val === '' || val === null) {
+        return ''
+      }
+      switch (this.type) {
+        case 'rate':
+          return numerify(val, this.format || '0.00[00]')
+        case 'money':
+        default:
+          return numerify(val, this.format || '0,0.00')
+      }
+    },
+    focusFn() {
+      if (!this.disabled) {
+        this.showStr = false
+        this.valueNum =
+          this.value === null || this.value === '' ? undefined : this.value
+        this.$nextTick(() => {
+          this.$refs['input-number'].focus()
+        })
+      }
+    },
+    blurFn() {
+      this.showStr = true
+    },
+    changeFn(val) {
+      if (!val && val !== 0) {
+        return this.$emit('input', val)
+      }
+
+      switch (this.type) {
+        case 'rate':
+          {
+            let varStr = val.toString() + '.'
+            let varDLen = varStr.length - varStr.indexOf('.') - 1
+            let dNum = this.dNum !== undefined ? this.dNum : 4
+            let nVar = Number(val.toFixed(Math.min(varDLen, dNum)))
+            if (this.valueNum === nVar) {
+              this.valueNum = 0
+            }
+            this.$nextTick(() => {
+              this.valueNum = nVar
+              this.$emit('input', nVar)
+            })
+          }
+          break
+        case 'money':
+        default:
+          {
+            let dNum = this.dNum !== undefined ? this.dNum : 2
+            let nVar = Number(val.toFixed(dNum))
+            if (this.valueNum === nVar) {
+              this.valueNum = 0
+            }
+            this.$nextTick(() => {
+              this.valueNum = nVar
+              this.$emit('input', nVar)
+            })
+          }
+          break
+      }
+    }
+  }
+}
+</script>

package/src/components/InputNumber/numberRange.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="n20-num-w">
+    <inputNumber
+      v-bind="$attrs"
+      :value="startValue"
+      :max="endValue || endValue === 0 ? endValue : $attrs.max"
+      :type="type"
+      style="width: calc(50% - 8px)"
+      @input="(val) => $emit('update:start-value', val)"
+    />
+    <span class="numbre-range text-c" style="display: inline-block; width: 16px"
+      >-</span
+    >
+    <inputNumber
+      v-bind="$attrs"
+      :value="endValue"
+      :min="startValue || startValue === 0 ? startValue : $attrs.min"
+      :type="type"
+      style="width: calc(50% - 8px)"
+      @input="(val) => $emit('update:end-value', val)"
+    />
+  </div>
+</template>
+
+<script>
+import inputNumber from './index.vue'
+export default {
+  name: 'InputNumberRange',
+  components: {
+    inputNumber
+  },
+  props: {
+    startValue: {
+      type: [String, Number],
+      default: undefined
+    },
+    endValue: {
+      type: [String, Number],
+      default: undefined
+    },
+    type: {
+      type: String,
+      default: 'money'
+    }
+  }
+}
+</script>

package/src/components/InputSearch/index.vue

@@ -0,0 +1,75 @@
+<template>
+  <el-input
+    v-if="!select"
+    v-bind="$attrs"
+    :value="value"
+    v-on="$listeners"
+    @change="searchFn"
+  >
+    <i
+      slot="suffix"
+      class="is-search el-input__icon el-icon-search"
+      @click.stop="searchFn"
+    ></i>
+  </el-input>
+  <div v-else class="n20-input-search">
+    <el-select
+      ref="input-search"
+      v-bind="$attrs"
+      :value="value"
+      :filterable="select"
+      :multiple="multiple"
+      :allow-create="true"
+      v-on="$listeners"
+      @change="changeFn"
+      @visible-change="visibleChangeFn"
+    >
+      <slot></slot>
+    </el-select>
+    <span class="el-input__suffix">
+      <span
+        class="is-search el-input__icon el-icon-search"
+        @click.stop="searchFn"
+      ></span>
+    </span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'InputSearch',
+  props: {
+    value: {
+      type: [String, Number, Object, Array],
+      default: undefined
+    },
+    select: {
+      type: Boolean,
+      default: false
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    this.listeners = Object.assign({}, this.$listeners, { input: () => {} })
+    return {}
+  },
+  methods: {
+    visibleChangeFn(val) {
+      if (val && !this.$refs['input-search']['multiple']) {
+        this.$refs['input-search']['selectedLabel'] =
+          this.$refs['input-search']['currentPlaceholder']
+      }
+    },
+    changeFn(val) {
+      this.$emit('input', val)
+      this.$emit('change', val)
+    },
+    searchFn() {
+      this.$emit('search', this.value)
+    }
+  }
+}
+</script>

package/src/components/Layout/AsideNav/index.vue

@@ -0,0 +1,144 @@
+<template>
+  <el-menu
+    class="layout-aside flex-column"
+    :collapse="collapse"
+    :default-active="activeNav"
+    background-color="#3d4b6a"
+    text-color="#fefefea6"
+    active-text-color="#ffffff"
+  >
+    <template v-for="omenus in menus">
+      <template v-for="item in omenus.menu">
+        <!-- 一级菜单 -->
+        <el-menu-item
+          v-if="!item.children"
+          :key="item.title"
+          :index="item.uuid"
+          @click="linkFn(item)"
+        >
+          <i
+            v-if="item.iconUrl"
+            class="el-icon- icon-url"
+            :style="{ backgroundImage: `url(${item.iconUrl})` }"
+          ></i>
+          <i v-else :class="item.iconClass"></i>
+          <span v-if="!item.href" slot="title">{{ item | titleF }}</span>
+          <a
+            v-else
+            slot="title"
+            :href="item.href"
+            target="_blank"
+            :rel="/^\//.test(item.href) ? 'opener' : undefined"
+            >{{ item | titleF }}</a
+          >
+        </el-menu-item>
+        <el-submenu
+          v-else
+          :key="item.title"
+          :index="item.title"
+          popper-class="nav-menu-pop"
+        >
+          <template slot="title">
+            <i
+              v-if="item.iconUrl"
+              class="el-icon- icon-url"
+              :style="{ backgroundImage: `url(${item.iconUrl})` }"
+            ></i>
+            <i v-else :class="item.iconClass"></i>
+            <span>{{ item | titleF }}</span>
+          </template>
+          <template v-for="itemc in item.children">
+            <!-- 二级菜单 -->
+            <el-menu-item
+              v-if="!itemc.children"
+              :key="itemc.title"
+              :index="itemc.uuid"
+              @click="linkFn(itemc)"
+            >
+              <i
+                v-if="itemc.iconUrl"
+                class="el-icon- icon-url"
+                :style="{ backgroundImage: `url(${itemc.iconUrl})` }"
+              ></i>
+              <i v-else :class="itemc.iconClass"></i>
+              <span slot="title">{{ itemc | titleF }}</span>
+            </el-menu-item>
+            <el-submenu
+              v-else
+              :key="itemc.title"
+              :index="itemc.title"
+              popper-class="nav-menu-pop"
+            >
+              <template slot="title">
+                <i
+                  v-if="itemc.iconUrl"
+                  class="el-icon- icon-url"
+                  :style="{ backgroundImage: `url(${itemc.iconUrl})` }"
+                ></i>
+                <i v-else :class="itemc.iconClass"></i>
+                <span>{{ itemc | titleF }}</span>
+              </template>
+              <template v-for="itemcc in itemc.children">
+                <!-- 三级菜单 -->
+                <el-menu-item
+                  :key="itemcc.title"
+                  :index="itemcc.uuid"
+                  @click="linkFn(itemcc)"
+                >
+                  <i
+                    v-if="itemcc.iconUrl"
+                    class="el-icon- icon-url"
+                    :style="{ backgroundImage: `url(${itemcc.iconUrl})` }"
+                  ></i>
+                  <i v-else :class="itemcc.iconClass"></i>
+                  <span slot="title">{{ itemcc | titleF }}</span>
+                </el-menu-item>
+              </template>
+            </el-submenu>
+          </template>
+        </el-submenu>
+      </template>
+    </template>
+    <span class="flex-item"></span>
+    <div class="open-collapsed-btn">
+      <span :class="collapse ? 'n20-icon-caidanshouqi f-s-l rotate-icon':'n20-icon-caidanshouqi f-s-l' " @click="setCollapse"></span>
+    </div>
+  </el-menu>
+</template>
+
+<script>
+import { labelF } from '../utils'
+export default {
+  filters: {
+    titleF: labelF
+  },
+  props: {
+    menus: {
+      type: Array,
+      default: () => []
+    },
+    activeNav: {
+      type: String,
+      default: undefined
+    },
+    collapse: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {}
+  },
+  methods: {
+    linkFn(menu, base) {
+      if (!menu.href) {
+        this.$emit('menu-click', menu, base)
+      }
+    },
+    setCollapse() {
+      this.$emit('update:collapse', !this.collapse)
+      window.localStorage.setItem('aside-nav-collapse', !this.collapse)
+    }
+  }
+}
+</script>

package/src/components/Layout/HeaderWrap/changePwd.vue

@@ -0,0 +1,215 @@
+<template>
+  <div v-loading="laoding">
+    <el-form
+      ref="cp-form"
+      :model="form"
+      label-width="6em"
+      @submit.native.prevent
+    >
+      <el-form-item label="账号">
+        <el-input :value="form.username" disabled />
+      </el-form-item>
+      <el-form-item
+        label="原始密码"
+        prop="orginPassword"
+        :rules="[
+          { required: true, message: '请输入原始密码', trigger: 'blur' },
+          { validator: orginPasswordVd, trigger: 'blur' }
+        ]"
+      >
+        <el-input
+          v-model="form.orginPassword"
+          type="password"
+          placeholder="请输入原始密码"
+        />
+      </el-form-item>
+      <el-form-item
+        label="新密码"
+        prop="newPassword"
+        :rules="[
+          { required: true, message: '请输入新密码', trigger: 'blur' },
+          { validator: newPasswordVd, trigger: 'blur' }
+        ]"
+      >
+        <el-input
+          v-model="form.newPassword"
+          placeholder="请输入新密码"
+          show-password
+          @change="newPwdChange"
+        />
+      </el-form-item>
+      <el-form-item
+        label="确认密码"
+        prop="validatePassword"
+        :rules="[
+          { required: true, message: '请确认新密码', trigger: 'blur' },
+          { validator: validatePasswordVd, trigger: 'blur' }
+        ]"
+      >
+        <el-input
+          v-model="form.validatePassword"
+          :disabled="!form.newPassword"
+          placeholder="请确认新密码"
+          show-password
+        />
+      </el-form-item>
+    </el-form>
+
+    <div class="dialog-footer">
+      <el-button type="primary" @click="confirmFn">确认</el-button>
+      <el-button @click="closeFn">取消</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import auth from '../../../utils/auth'
+import axios from '../../../utils/axios'
+export default {
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      pwdMin: undefined,
+      pwdMax: undefined,
+      pwdRE: undefined,
+      pwdReMsg: undefined,
+      form: {
+        username: sessionStorage.getItem('userNo'),
+        orginPassword: '',
+        newPassword: '',
+        validatePassword: ''
+      },
+      laoding: false
+    }
+  },
+  watch: {
+    visible(v) {
+      if (!v) {
+        this.$refs['cp-form'].resetFields()
+      }
+    }
+  },
+  created() {
+    this.getPwdRule()
+  },
+  methods: {
+    getPwdRule() {
+      axios
+        .post('/bems/prod_1.0/user/api/userController/use')
+        .then(({ data }) => {
+          let { minLength, maxLength, passwordStrength } = data
+          this.pwdMin = minLength
+          this.pwdMax = maxLength
+          switch (passwordStrength) {
+            case '0':
+              this.pwdRE = [/[A-z0-9]+/]
+              this.pwdReMsg = `密码只能为字母数字`
+              break
+            case '1':
+              this.pwdRE = [/[A-z]+/, /[0-9]+/]
+              this.pwdReMsg = `密码只能包含数字 + 字母`
+              break
+            case '2':
+              this.pwdRE = [/[A-Z]+/, /[a-z]+/, /[0-9]+/]
+              this.pwdReMsg = `密码只能包含数字 + 大写字母 + 小写字母`
+              break
+          }
+        })
+    },
+
+    orginPasswordVd(r, value, callback) {
+      axios
+        .post(
+          '/bems/prod_1.0/uas/api/authorization/password/validate',
+          {
+            username: this.form.username,
+            password: value
+          },
+          { noMsg: true, loading: false }
+        )
+        .then(() => {
+          callback()
+        })
+        .catch(() => {
+          callback(new Error('原始密码与旧密码不一致'))
+        })
+    },
+    newPasswordVd(r, value, callback) {
+      let _re_1 = new RegExp(`^.{${this.pwdMin},${this.pwdMax}}$`)
+      if (!_re_1.test(value)) {
+        callback(new Error(`密码长度范围:${this.pwdMin}-${this.pwdMax}位`))
+      }
+
+      if (this.pwdRE) {
+        this.pwdRE.some((re) => {
+          if (!re.test(value)) {
+            callback(new Error(this.pwdReMsg))
+            return true
+          }
+        })
+      }
+      callback()
+    },
+    validatePasswordVd(r, value, callback) {
+      if (value === this.form.newPassword) {
+        callback()
+      } else {
+        callback(new Error('两次输入密码不一致!'))
+      }
+    },
+    newPwdChange(val) {
+      if (!val) {
+        this.form.validatePassword = ''
+        this.$refs['cp-form'].clearValidate('validatePassword')
+      }
+    },
+    confirmFn() {
+      this.$refs['cp-form'].validate((v) => {
+        if (v) {
+          if (this.form.newPassword === this.form.orginPassword) {
+            this.$message.error('新密码不能与旧密码相同!')
+            this.form.newPassword = ''
+            this.form.validatePassword = ''
+            return
+          }
+
+          this.laoding = true
+          axios
+            .post(
+              '/bems/prod_1.0/uas/api/authorization/password/update',
+              {
+                username: this.form.username,
+                newPassword: this.form.newPassword
+              },
+              {
+                loading: () => {
+                  this.laoding = false
+                }
+              }
+            )
+            .then(() => {
+              this.confirmFnThen()
+            })
+        }
+      })
+    },
+    confirmFnThen() {
+      this.$message({
+        message: '密码修改成功!',
+        type: 'success'
+      })
+      this.closeFn()
+
+      auth.removeToken()
+    },
+    closeFn() {
+      this.$emit('update:visible', false)
+    }
+  }
+}
+</script>