# @huilian/components-tms

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

Latest version **3.7.24** (published 2026-08-19) · 0 weekly downloads

## Install

```sh
npm install @huilian/components-tms
pnpm add @huilian/components-tms
yarn add @huilian/components-tms
bun add @huilian/components-tms
```

## Health

**Score 60/100 (C)** — status: active.

Positive: esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 3.7.24 |
| Published | 2026-08-19 |
| First published | 2022-01-19 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 382.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | biuge, huba012, olivianate, chengle123, wenqua21 |

## Links

- npm: https://www.npmjs.com/package/@huilian/components-tms
- npm.io page: https://npm.io/package/@huilian/components-tms

## Dependencies (6)

- [dayjs](https://npm.io/package/dayjs.md) ^1.11.21
- [core-js](https://npm.io/package/core-js.md) ^3.6.5
- [pdfmake](https://npm.io/package/pdfmake.md) ^0.3.3
- [lodash-es](https://npm.io/package/lodash-es.md) ^4.17.21
- [html2canvas](https://npm.io/package/html2canvas.md) ^1.4.1
- [vuedraggable](https://npm.io/package/vuedraggable.md) ^2.24.3

## Recent versions

- 3.7.24 (latest) — 2026-08-19
- 3.7.23 — 2026-07-21
- 3.7.22 — 2026-07-16
- 3.7.21 — 2026-06-01
- 3.7.20 — 2026-06-01
- 3.7.19 — 2026-05-28
- 3.7.18 — 2026-05-27
- 3.7.17 — 2026-05-27
- 3.7.16 — 2026-05-26
- 3.7.14 — 2026-05-25
- 3.7.12 — 2026-05-13
- 3.7.11 — 2026-05-13
- 3.7.10 — 2026-04-13
- 3.7.9 — 2026-04-01
- 3.7.8 — 2026-03-30
- … 135 more at https://npm.io/package/@huilian/components-tms/versions

## README

##  huilian的npm包项目

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


```html
// 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>
```


```html
表格配置
// 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 来进行操作

```html
 <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 配置约定以下几个是常用的 完全可以自己约定

```javascript
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

---
_Source: https://npm.io/package/@huilian/components-tms · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._