xy-tool-ui

一个基于Vue CLI 3.0，Babel7，VUE2.6封装的VUE-UI组件库模版，支持统一加载和按需加载，可以按需分别加载对应组件的js和css。

Installing

npm install xy-tool-ui --save

在 unpkg 上获取

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/xy-tool-ui/package/index.css">
<!-- 引入脚本 -->
<script src="https://unpkg.com/xy-tool-ui/package/index.umd.min.js"></script>

Example

// 统一加载
import XiaoYiToolUI from 'xy-tool-ui'
Vue.use(XiaoYiToolUI)

// 只加载component1
import { component1 } from 'xy-tool-ui'
Vue.use(component1)

// 加载component1和component2
import { component1 , component2} from 'xy-tool-ui'
Vue.use(component1)
Vue.use(component2)

使用示例

1.查看报告
<y-iframe-report
        ref="report"
        :autographSrc="report.autographSrc"
        :option="report.option"
        :reject="reject"
        :report-type="report.option.reportType"
        :reportHideList="report.reportHideList"
        :reviewedSignedSrc="report.reviewedSignedSrc"
        :rid="report.rid"

        :showShadow="showShadow"
        :template-data="templateData"
        :uid="report.uid"
        :urlTransformation="report.urlTransformation"
        height="550px"
        width="850px"
        @backHtml="backHtml"
        @error="error"
>
</y-iframe-report>

    -参数：uid 测评报告id [String, Array]
    -参数：printKeyword false/true  默认：true 是否开启快捷键监听打印
    -参数：option Object
    {
        action: 'dev', // 环境 dev/prod  默认：dev
        hostSuffix: '/prod-api', // 自定义请求后缀 默认：/prod-api
        path: '/generate/report/u/', // 自定义请求地址
        auth: 'Authorization', // api请求中的令牌key // 默认：Authorization
        localAuthKey: 'Authorization', // 当前缓存令牌key // 默认：Authorization
        tokenPath: '/api/token', // 后端量表库token请求地址
        reportType: 'doc', // 报告类型 (html、doc) 默认:html
    }
    -参数：reportHideList Array 默认：[]
        · 封面:gauge_cover
        · 标题:headerTitle
        · 标题图片:headerTitleImg
        · 基本信息:user
        · 量表简介:gauge_introduce
        · 筛查维度:gauge_dimension
        · 量表得分:gauge_score
        · 测评结果:gauge_conclusion
        · 图:mainChart
        · 表:gauge_surface
        · 测评分析:gauge_analysis
        · 指导意见:gauge_opinion
        · 预警等级:gauge_warning
        · 尾部:gauge_footer
        · 原始答卷:gauge_answer
        · 测评分析---症状表现:symptomsItemClassName
        · 测评分析---建议:suggestClassName
    -参数：showShadow 显示报告边框 Boolean 默认：false  
    -参数：autographSrc 测评员签字地址 String 默认：''  
    -参数：reviewedSignedSrc 审核员签字地址 String 默认：''  
    -参数：reportShow 显示报告 Boolean 默认：true 可不传，获取源码使用  
    -参数：urlTransformation 源码 [String, Array] 可不传，获取源码使用  
    -参数：rid 模板id [String] doc 模式必填；团测使用  
    -参数：templateData 模板数据 [Json] doc 模式必填；团测使用  
    -参数：reject 异常回调事件 [function] 可处理接口报错、token登录超时操作  

   ·事件监听 
        @backHtml="backHtml" 
        this.$refs['report'].urlTransformationFun()
   ·事件调用打印 
        this.$refs['report'].print()
   ·快捷键监听打印 ~~目前已去除监听~~
        Ctrl+P 
   ·回调例子
      reject (res) {
          if (typeof res == 'object') {
              if (res.code === 401) {
                  this.$confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', {
                      confirmButtonText: '重新登录',
                      cancelButtonText: '取消',
                      type: 'warning'
                    }
                  ).then(() => {
                       store.dispatch('LogOut').then(() => {
                            location.href = '/index'
                       })
                  }).catch(() => {
                  })
              } else {
                this.$message.error(res.msg)
              }
          }
      }

2.设计量表
    <y-design-answer-form />
 
3.量表配置
    <y-design-form-rules />

按需加载功能只针对有Babel配置的项目，单纯用script和link的方式引入js和样式是全量引入

License

Copyright (c) 2022-present, XiaoYI