haiwei-module-admin 1.0.0

package/src/components/file-download/index.vue

@@ -0,0 +1,81 @@
+<template>
+  <el-button
+    class="nm-button nm-file-download"
+    :type="type"
+    :size="size || fontSize"
+    :plain="plain"
+    :round="round"
+    :circle="circle"
+    :loading="loading"
+    :disabled="disabled"
+    :autofocus="autofocus"
+    :native-type="nativeType"
+    v-nm-has="code"
+    @click="onClick"
+  >
+    <nm-icon v-if="!loading && icon" :name="icon" />
+    <slot>
+      <span v-if="!circle && text" class="nm-button-text" v-html="text" />
+    </slot>
+  </el-button>
+</template>
+<script>
+export default {
+  props: {
+    /** 文件链接 */
+    url: String,
+    /** 私有的 */
+    private: Boolean,
+    /** 文件名称 */
+    fileName: String,
+    /** 尺寸，默认按照框架的字号设置 */
+    size: String,
+    /** 类型 primary/success/warning/danger/info/text */
+    type: String,
+    /** 是否朴素按钮 */
+    plain: Boolean,
+    /** 是否圆角按钮 */
+    round: Boolean,
+    /** 是否圆形按钮 */
+    circle: Boolean,
+    /** 是否加载中状态 */
+    loading: Boolean,
+    /** 是否禁用状态 */
+    disabled: Boolean,
+    /** 是否默认聚焦 */
+    autofocus: Boolean,
+    /** 原生 type 属性 button/submit/reset */
+    nativeType: String,
+    /** 图标 */
+    icon: String,
+    // 文本
+    text: String,
+    // 按钮编码，用于按钮权限控制
+    code: String
+  },
+  methods: {
+    onClick() {
+      if (this.url) {
+        if (this.private) {
+          $api.admin.file.download(this.url)
+        } else {
+          //通过模拟a标签点击事件下载文件
+          const link = document.createElement('a')
+          link.href = this.url
+          let fileName = this.fileName
+          if (!fileName) {
+            let arr = this.url.split('/')
+            fileName = arr[arr.length - 1]
+          }
+          link.setAttribute('download', fileName)
+          link.setAttribute('target', '_blank')
+          document.body.appendChild(link)
+          link.click()
+          document.body.removeChild(link)
+        }
+      }
+      this.$emit('click')
+    }
+  }
+}
+</script>

package/src/components/file-img/index.vue

@@ -0,0 +1,55 @@
+<template>
+  <div :style="{ width, height }" class="nm-file-img-preview">
+    <img v-if="url__" :src="url__" />
+    <nm-icon class="no-picture" v-else name="photo" />
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      url_: this.url,
+      url__: ''
+    }
+  },
+  props: {
+    url: {
+      type: String
+    },
+    //是否私有
+    private: Boolean,
+    width: {
+      type: String,
+      default: 'auto'
+    },
+    height: {
+      type: String,
+      default: 'auto'
+    }
+  },
+  watch: {
+    url: {
+      immediate: true,
+      handler(val) {
+        if (val !== this.url_) {
+          if (this.private && this.url) {
+            $api.admin.file.preview(this.url).then(url => {
+              this.url__ = url
+            })
+          } else {
+            this.url__ = val
+          }
+        }
+      }
+    }
+  }
+}
+</script>
+<style lang="scss">
+.nm-file-img-preview {
+  display: block;
+  img {
+    width: 100%;
+  }
+}
+</style>

package/src/components/file-upload/index.vue

@@ -0,0 +1,140 @@
+<template>
+  <div class="nm-file-upload">
+    <div class="input">
+      <el-input :value="fileName" readonly :disabled="disabled" />
+    </div>
+    <div class="button">
+      <el-upload
+        ref="upload"
+        :action="action"
+        :headers="headers"
+        :data="uploadData"
+        name="formFile"
+        :disabled="disabled || loading"
+        :before-upload="onBeforeUpload"
+        :show-file-list="false"
+        :auto-upload="autoUpload"
+        :accept="accept"
+        :drag="false"
+        :on-success="onSuccess"
+        :on-error="onError"
+      >
+        <nm-button :type="btnType" text="上传" :icon="loading ? 'loading' : noIcon ? '' : 'upload'" :loading="loading" :disabled="disabled" />
+      </el-upload>
+    </div>
+  </div>
+</template>
+<script>
+import mixins from '../upload-mixins'
+export default {
+  mixins: [mixins],
+  data() {
+    return {
+      value_: this.value,
+      fileName: ''
+    }
+  },
+  props: {
+    value: {
+      type: String
+    },
+    /** 按钮类型 */
+    btnType: {
+      type: String,
+      default: 'primary'
+    },
+    /** 不显示按钮图标 */
+    noIcon: Boolean
+  },
+  methods: {
+    onBeforeUpload(file) {
+      // 文件格式验证
+      if (!this.verifyFileType(file)) {
+        return false
+      }
+      // 验证是否超出最大上传数
+      if (this.maxSizeBytes && file.size > this.maxSizeBytes) {
+        this._error(`文件大小${this.getSizeUnit(file.size)}超过了最大允许值${this.maxSize}`)
+        return false
+      }
+      if (this.beforeUpload && typeof this.beforeUpload === 'function' && !this.beforeUpload(file)) {
+        return false
+      }
+
+      this.loading = true
+      return true
+    },
+    onSuccess(res, file) {
+      if (res.code === 1) {
+        const data = res.data
+        this.value_ = data.fullPath
+        this.fileName = file.name
+        this.$emit('input', this.value_)
+        this.$emit('success', data, file)
+      } else {
+        this._error(res.msg)
+        this.$emit('error')
+      }
+      this.loading = false
+    },
+    reset() {
+      this.value_ = ''
+      this.fileName = ''
+      this.$emit('input', this.value_)
+    },
+    get() {
+      if (this.value_) {
+        $api.admin.file.getByFullPath(this.value_).then(data => {
+          this.fileName = data.fileName
+        })
+      } else {
+        this.fileName = ''
+      }
+    }
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler(val) {
+        if (val !== this.value_) {
+          this.value_ = val
+          this.get()
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.nm-file-upload {
+  position: relative;
+  padding-right: 80px;
+  width: 100%;
+  box-sizing: border-box;
+  .input {
+    .el-input__inner {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+  .button {
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 80px;
+    height: 100%;
+
+    > div,
+    .el-upload,
+    .nm-button {
+      height: 100%;
+    }
+
+    .nm-button {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+}
+</style>

package/src/components/file-upload-img/index.vue

@@ -0,0 +1,263 @@
+<template>
+  <div :class="['nm-file-upload-img', disabled ? 'disabled' : '']" :style="{ width, height }" v-loading="loading">
+    <div v-if="disabled" class="disabled-bg"></div>
+    <el-upload
+      ref="upload"
+      :action="action"
+      :headers="headers"
+      :data="uploadData"
+      name="formFile"
+      :disabled="disabled || loading"
+      :before-upload="onBeforeUpload"
+      :show-file-list="false"
+      :auto-upload="autoUpload"
+      :accept="accept"
+      :drag="drag"
+      :on-success="onSuccess"
+      :on-error="onError"
+    >
+      <nm-file-img v-show="value_" :url="url" :private="accessMode !== 1" class="preview" />
+      <div v-show="!value_" class="text-box">
+        <i class="el-icon-upload" :style="{ fontSize: iconSize }"></i>
+        <div v-if="!noText" class="text">
+          <slot name="text">
+            将文件拖到此处，或
+            <em>点击上传</em>
+          </slot>
+        </div>
+        <div class="tip">
+          <slot name="tip">{{ tip }}</slot>
+        </div>
+      </div>
+    </el-upload>
+    <span v-show="value_" class="remove" @click="reset">
+      <nm-icon name="close" />
+    </span>
+  </div>
+</template>
+<script>
+import mixins from '../upload-mixins'
+
+export default {
+  mixins: [mixins],
+  data() {
+    return {
+      value_: this.value,
+      url: ''
+    }
+  },
+  props: {
+    value: {
+      type: String
+    },
+    /** 宽度 */
+    width: {
+      type: String,
+      default: '100px'
+    },
+    /** 高度 */
+    height: {
+      type: String,
+      default: '150px'
+    },
+    /** 文本说明 */
+    text: String,
+    /** 底部提示语 */
+    tip: String,
+    /** 接受上传的文件类型 */
+    accept: {
+      type: String,
+      default: 'image/jpeg,image/png'
+    },
+    /** 可接受文件类型 */
+    fileType: {
+      type: Array,
+      default() {
+        return ['jpg', 'jpeg', 'png']
+      }
+    },
+    /** 图标大小 */
+    iconSize: {
+      type: String,
+      default: '5em'
+    },
+    /**不显示文本 */
+    noText: Boolean
+  },
+  methods: {
+    onBeforeUpload(file) {
+      // 文件格式验证
+      if (!this.verifyFileType(file)) {
+        return false
+      }
+      // 验证是否超出最大上传数
+      if (this.maxSizeBytes && file.size > this.maxSizeBytes) {
+        this._error(`文件大小${this.getSizeUnit(file.size)}超过了最大允许值${this.maxSize}`)
+        return false
+      }
+      if (this.beforeUpload && typeof this.beforeUpload === 'function' && !this.beforeUpload(file)) {
+        return false
+      }
+
+      this.loading = true
+      return true
+    },
+    onSuccess(res, file) {
+      if (res.code === 1) {
+        const data = res.data
+        this.value_ = data.fullPath
+        this.url = data.url
+        this.$emit('input', this.value_)
+        this.$emit('success', data, file)
+      } else {
+        this._error(res.msg)
+        this.$emit('error')
+      }
+      this.loading = false
+    },
+    reset() {
+      this.value_ = ''
+      this.url = ''
+      this.$emit('input', this.value_)
+    },
+    get() {
+      if (this.value_) {
+        $api.admin.file.getByFullPath(this.value_).then(data => {
+          this.url = data.url
+        })
+      } else {
+        this.url = ''
+      }
+    }
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler(val) {
+        if (val !== this.value_) {
+          this.value_ = val
+          this.get()
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.nm-file-upload-img {
+  position: relative;
+  display: inline-block;
+  box-sizing: border-box;
+  border: 1px dashed #ccc;
+  background-color: #fff;
+  text-align: center;
+  color: #8c939d;
+  cursor: pointer;
+  border-radius: 5px;
+  overflow: hidden;
+
+  > div {
+    width: 100%;
+    height: 100%;
+  }
+
+  .preview {
+    width: 100%;
+    height: 100%;
+    line-height: 100%;
+    text-align: center;
+    img {
+      max-width: 100%;
+      max-height: 100%;
+    }
+    .no-picture {
+      font-size: 2em;
+    }
+  }
+
+  .el-upload {
+    width: 100%;
+    height: 100%;
+  }
+
+  .el-upload-dragger {
+    position: relative;
+    top: 50%;
+    border: none;
+    margin-top: -50%;
+    width: 100%;
+    height: auto;
+
+    .text-box {
+      font-size: 14px;
+
+      .el-icon-upload {
+        margin: auto;
+        font-size: 5em;
+        color: #c0c4cc !important;
+      }
+
+      em {
+        color: #409eff;
+        font-style: normal;
+      }
+
+      .text {
+        font-size: 13px;
+        line-height: 130%;
+      }
+    }
+  }
+
+  .el-loading-spinner {
+    line-height: 100%;
+  }
+
+  .remove {
+    position: absolute;
+    display: none;
+    top: 0;
+    right: 0;
+    width: 30px;
+    height: 30px;
+    line-height: 27px;
+    border-radius: 15px;
+    background-color: #f56c6c;
+    color: #ccc;
+    font-size: 16px;
+
+    &:hover {
+      color: #fff;
+    }
+  }
+
+  &:hover {
+    border-color: #409eff;
+
+    .remove {
+      display: inline-block;
+    }
+  }
+
+  &.disabled:hover {
+    border: 1px dashed #ccc;
+
+    .remove {
+      display: none;
+    }
+  }
+
+  .disabled-bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #f5f7fa;
+    z-index: 999;
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+</style>

package/src/components/index.js

@@ -0,0 +1,10 @@
+import library from 'netmodular-ui/packages/library'
+let components = []
+const requireComponent = require.context('./', true, /index\.vue$/)
+requireComponent.keys().map(fileName => {
+  components.push({
+    name: `${library.prefix.toLowerCase()}-${fileName.split('/')[1]}`,
+    component: requireComponent(fileName).default
+  })
+})
+export default components

package/src/components/login-mode-select/index.vue

@@ -0,0 +1,11 @@
+<script>
+import { mixins } from 'netmodular-ui'
+export default {
+  mixins: [mixins.select],
+  data() {
+    return {
+      action: $api.admin.tool.loginModeSelect
+    }
+  }
+}
+</script>

package/src/components/module-select/index.vue

@@ -0,0 +1,11 @@
+<script>
+import { mixins } from 'netmodular-ui'
+export default {
+  mixins: [mixins.select],
+  data() {
+    return {
+      action: $api.admin.module.select
+    }
+  }
+}
+</script>

package/src/components/platform-select/index.vue

@@ -0,0 +1,28 @@
+<script>
+import { mixins } from 'netmodular-ui'
+export default {
+  mixins: [mixins.select],
+  data() {
+    return {
+      action: this.query
+    }
+  },
+  props: {
+    /**不包含Web */
+    noWeb: Boolean
+  },
+  methods: {
+    query() {
+      return new Promise(resolve => {
+        $api.admin.tool.platformSelect().then(data => {
+          let options = data
+          if (this.noWeb) {
+            options = data.filter(m => m.value > 0)
+          }
+          resolve(options)
+        })
+      })
+    }
+  }
+}
+</script>

package/src/components/role-select/index.vue

@@ -0,0 +1,11 @@
+<script>
+import { mixins } from 'netmodular-ui'
+export default {
+  mixins: [mixins.select],
+  data() {
+    return {
+      action: $api.admin.role.select
+    }
+  }
+}
+</script>