hntdi-cloud-ui

cloud-ui

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

安装

切换本地仓库地址

npm config set registry http://134.160.180.90:30891/repository/npm-hosted/

登录

npm login --registry=http://134.160.180.90:30891/repository/npm-hosted/

账号：admin

密码：nexus@2022

安装依赖

npm install npm-demo-ld

全局引入mian.js

import CloudUI from 'cloud-ui/lib/index
import 'cloud-ui/lib/index/style.css

Vue.use(CloudUI)

按需引入

配置babel.config.js

module.exports = {
  presets: [
    '@vue/app',
    ['@babel/preset-env', { 'modules': false }]
  ],
  plugins: [
    ['import', {
      libraryName: 'cloud-ui',
      libraryDirectory: 'lib',
      style: (name) => {
        return `${name}/style.css`
      }
    }, 'cloud-ui']
  ]
}

页面中引入并注册

import { ImageUpload, FileUpload } from 'cloud-ui'
components: { ImageUpload, FileUpload }

CommonUtils

CommonUtils为公共方法合集，需要在使用页面中引入并使用

import { CommonUtils } from 'cloud-ui'

CommonUtils.getToken()

使用request方法时需要在main.js中进行初始化

export function init() {
// 初始化,定义request的baseURL
window.BASE_API = process.env.VUE_APP_BASE_API
window.SSO_URL = process.env.VUE_APP_SSO_URL
}

Vue.use(init)

方法

方法名	说明	参数	具体使用
request	公共request请求，使用时需要在main.js中进行初始化	对象类型，{baseURL,url,responseType,method,params,data等}，baseURL，url，method为必填	CommonUtils.request({ responseType: 'blob', baseURL: baseURL, url: '/item/exportAllItemList', method: 'get', params: query })
dictCache	根据字典代码获取字典数据	（url，option）url为拼接字典代码后的请求路径，option对象类型，需包含cache,repeat,refresh三个参数	CommonUtils.dictCache(/supervise/item/queryDictDataListByTypeCode?typeCode=${type}, { cache: true, // 是否开启缓存 repeat: true, // 是否开启防止同时发起多个相同请求 refresh: refresh // 是否刷新 })
getToken	获取HNTDI-AccessToken		CommonUtils.getToken()
removeRefreshToken	移除刷新token
removeToken	移除HNTDI-AccessToken
removeTokenType	移除tokenType
setRefreshToken	修改刷新token
setToken	修改HNTDI-AccessToken
setTokenType	修改tokenType

直接引入

import { request } from 'cloud-ui/lib/common-utils'

image-upload图片上传

<image-upload :image-limit="{size:1}" :image-type="['image/png']"/>

属性

参数	说明	类型	默认值
image-type	可以上传的图片类型	array	['image/png', 'image/jpg', 'image/jpeg','image/gif']
image-limit	图片文件限制条件，包含图片大小size(M)、图片尺寸width(px)，height(px)	object	{size:100}
image-url	已上传的图片地址	string
accept-type	接受上传的图片类型，(.png, .jpg, .jpeg）	string	.png, .jpg, .jpeg, .gif

事件

事件名称	说明	回调参数
imgUpload	图片上传成功	file图片文件
deletePic	移除当前图片

file-upload文件上传

<file-upload :file-type="['xlsx', 'xls', 'doc', 'docx', 'wps', 'ppt', 'pptx', 'pdf', 'zip', 'rar', 'txt']"
                   accept-type=".xlsx, .xls, .doc, .docx, .wps, .ppt, .pptx, .pdf, .zip, .rar, .txt"
                   :file-limit="{size:5,count:5}"/>

属性

参数	说明	类型	默认值
file-type	可以上传的文件类型	array	必填
file-limit	文件限制条件，包含单个文件大小size(M)、文件个数count	object	{ size: 100, count: 9999}
attachment-list	已上传的文件列表	array
accept-type	接受上传的文件类型	string	必填

事件

事件名称	说明	回调参数
fileUpload	上传文件列表发生变化，包括添加文件和移除文件	文件列表