npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@huilian/components-tms

v3.1.1

Published

* lib为产出物 * components 源码文件目录 * package.json 里的file 是打包产物输出文件过滤只输出构建后产物路径 * 这包项目里基本都是后台element为主的 二次包装组件 所以一些依赖是项目本身就有的 这单要注意 * 参考components里的实际组件UploadFile 开发就行了 hellovue和mybutton是例子

Downloads

41

Readme

huilian的npm包项目

  • lib为产出物
  • components 源码文件目录
  • package.json 里的file 是打包产物输出文件过滤只输出构建后产物路径
  • 这包项目里基本都是后台element为主的 二次包装组件 所以一些依赖是项目本身就有的 这单要注意
  • 参考components里的实际组件UploadFile 开发就行了 hellovue和mybutton是例子
// template-key 代表表头key 
// get-api是业务接口 
// requesFn 是接口请求库 可以自定义 
// scheme 代表组件
<form-table-scheme ref="scheme" searchPlaceholder= '车牌号/VIN码/车型名称/车辆资产归属' :requestFn="requestFn"   :template-key="templateKey"  :get-api="getApi" >
    // 左侧的按钮 slot
    <template v-slot:leftBtn>
        <el-button type="primary" @click="dialogVisible = true" >导入</el-button>
        <el-button icon="el-icon-download" @click="exportFile">导出</el-button>
        <el-button icon="el-icon-download" @click="jump">车辆监控</el-button>
    </template>
    // xxxHeader 是?提示的钩子 是以对照的key 比如下面的deviceId + Header关键字来做的
    <template #deviceIdHeader>
        车辆行驶证上车辆识别代码
    </template>
    // 比如要对status 做特殊处理 就可以这样来 props代表列表数据, queryConfig 是列表所代表的配置
    <template #status="{props,queryConfig}">
        <el-tag :type="tagArr[props.status]">
        {{ queryConfig.rule.option.find(i => i.value == props.status ).label }}
        </el-tag> 
    </template> 
    // 操作拦按钮 props代表列表数据 
    <template #actionBtn="{props}">
        <el-button type="text"  @click="jumpInfo(props)">合同详情</el-button>
    </template>
</form-table-scheme>
<script>
export default {
  methods: {
      exportFile(){
          //导出 ops是接口请求参数
          const data = this.$refs.scheme.ops
          delete data.pageSize;
          delete data.skipCount;
          download('/areaOperate/billcs/exportBillList',data)
      },
      selectCur(cur) {
          const { value, name } = cur
          // this.$refs.scheme.getList 组件的请求勾子函数
          this.$refs.scheme.getList({ planDueDateFrom: value[0],planDueDateTo:value[1] })

      }
  },
}


</script>
表格配置
// dateRange 区间时间
{
  "name": "申请时间", //非必要
  "format": "YYYY-MM-DD HH:mm:ss", // 必要格式化
  "searchKey": [  // 区间时间会有两个key 
    "execTimeStart",
    "execTimeEnd"
  ]
}
// check 选择框
{
  "searchKey": "applyStatusList", // 一般情况下是对应的col值 但是有时候查询和col对不上需要手动配置searchKey
  "option": [ // option就是对照数组
    {
      "label": "待审核",
      "value": "TO_AUDIT"
    },
    {
      "label": "已经审核",
      "value": "AUDIT"
    },
    {
      "label": "驳回",
      "value": "REJECT"
    },
    {
      "label": "撤回",
      "value": "CANCEL"
    },
    {
      "label": "关闭",
      "value": "CLOSE"
    }
  ]
}

eventName 回掉函数名称

取决于值的具体处理 比如操作拦的 定义了钩子 actionBtn 但是对于别的处理没有太好的办法 只是做了一个约定 根据索引key 来进行操作

 <template #actionBtn="{props}">
      <el-button v-if="props.applyStatus === 'TO_AUDIT'" type="text" icon="el-icon-download" @click="cancel(props)">撤回申请</el-button>
  </template>
  // settleType 一般情况下如下可以忽略 因为formatSwitch 方法自动提供了这种check类型的值处理
  <template #settleType="{props,queryConfig}">
        {{ queryConfig.rule.option.find(i => i.value == props.settleType).label }}
    </template> 

queryConfig 配置约定以下几个是常用的 完全可以自己约定

queryConfig:{
    "type": "date", // 组件类型
    "rule": {
        "name": "合同起始日期",
        //数据的处理格式 各种类型不同 
        "format": "YYYY-MM-DD HH:mm:ss",  
        // 数据的检索key 比如字段叫contractStartDate 但是在列表中需要叫contractStartDateForm
        "searchKey": "contractStartDateFrom",
        // 检索的数据源 比如对应check类型 就是[{label:'状态1',value:'1'}] 的数据渲染项目 不同类型的不一样 比如date类型就不太用的上 这个字段
        "option":[],
    }
}

#本地调试 1.首先启动项目 npm run dev 2.再次使用命令 npm link 3.启动或重启huilianMS 4.在项目包使用 npm link @huilian/components-tms